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内 容 简 介 


本 书 基于 Axure 原型 设计 、HTML 5、CSS 3、JavaScript 和 Photoshop, 以 案例 驱动 形式 介绍 了 网 页 
设计 的 相关 知识 。 本 书 共 分 为 14 个 单元 ,内 容 涵 盖 了 网 站 设计 开发 人 门 .HTML 标签 与 CSS 样式 基 
础 ,图 像 设计 在 网 页 中 的 应 用 、 制 作 导 航 栏 表格 在 网 页 中 的 应 用 、 表 单 在 网 页 中 的 应 用 、CSS 标准 流 布 
局 .CSS 浮动 布局 .CSS 定位 布局 .JavaScript 的 应 用 ,以 及 综合 应 用 案例 等 。 

本 书 内 容 翔实 、 图 文 并 茂 结构 清晰 、 循 序 渐进 ,基础 知识 与 案例 操作 紧密 结合 , 既 可 作为 高 等 院 校 ， 
高 .中 等 职业 技术 院 校 ,以 及 各 类 计算 机 教育 培训 机 构 的 网 页 设计 教材 ,也 可 供 广大 网 页 设计 爱好 者 自 
学 使 用 。 
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出 版 说 明 


我 国 高 职高 专 教育 经 过 十 几 年 的 发 展 , 已 经 转向 深度 教学 改革 阶段 。 
教育 部 于 2006 年 12 月 发 布 了 教 高 C2006] 第 16 号 文件 (关于 全 面 提高 高 
等 职业 教育 教学 质量 的 若干 意见 》, 大 力 推行 工学 结合 ,突出 实践 能 力 培 
养 ,全 面 提高 高 职高 专 教学 质量 。 

清华 大 学 出 版 社 作为 国内 大 学 出 版 社 的 领跑 者 ,为 了 进一步 推动 高 
职高 专 计算 机 专业 教材 的 建设 工作 ,适应 高 职高 专 院 校 计算 机 类 人 才 培 
养 的 发 展 趋势 ,根据 教 高 [2006] 第 16 号 文件 的 精神 ,2012 年 秋季 开始 了 
切合 新 一 轮 教 学 改革 的 教材 建设 工作 。 该 系列 教材 一 经 推出 ,就 得 到 了 
很 多 高 职 院 校 的 认可 和 选用 ,其 中 部 分 书籍 的 销售 量 超过 了 3 万 册 。 现 
重新 组 织 优秀 作者 对 部 分 图 书 进 行 改版 ,并 增加 了 一 些 新 的 图 书 品种 。 

目前 ,国内 高 职高 专 院 校 计算 机 网 络 与 软件 专业 的 教材 品种 繁多 ,但 
符合 国家 计算 机 网 络 与 软件 技术 专业 领域 技能 型 紧缺 人 才 培 养 培训 方 
案 , 并 符合 企业 的 实际 需要 ,能够 自 成 体系 的 教材 还 不 多 。 

我 们 组 织 国内 对 计算 机 网 络 和 软件 人 才 培 养 模式 有 研究 并 且 有 过 一 
段 实践 经 验 的 高 职高 专 院 校 , 进 行 了 较 长 时 间 的 研讨 和 调研 , 遂 选 出 一 批 
富有 工程 实践 经 验 和 教学 经 验 的 “ 双 师 型 "教师 ,合力 编写 了 这 套 适 用 于 
高 职高 专 计算 机 网 络 .软件 专业 的 教材 。 

本 套 教 材 的 编写 方法 是 以 任务 驱动 .案例 教学 为 核心 ,以 项 目 开 发 为 
主线 。 我 们 研究 分 析 了 国内 外 先进 职业 教育 的 培训 模式 、 教 学 方法 和 教 
材 特色 ,消化 吸收 优秀 的 经 验 和 成 果 。 以 培养 技术 应 用 型 人 才 为 目标 ， 
以 企业 对 人 才 的 需要 为 依据 ,把 软件 工程 和 项 目 管理 的 思想 完全 融入 
教材 体系 ,将 基本 技能 培养 和 主流 技术 相 结 合 , 课 程 设 置 中 重点 突出 、 
主 辅 分 明 ,结构 合理 、 衔 接 紧凑 。 教 材 侧重 培养 学 生 的 实战 操作 能 力 ， 
学 . 思 、 练 相 结合 , 旨 在 通过 项 目 实践 ,增强 学 生 的 职业 能 力 ,使 知识 从 
书本 中 释放 并 转化 为 专业 技能 。 


一 、 教 材 编写 思想 


本 套 教材 以 案例 为 中 心 , 以 技能 培养 为 目标 ,围绕 开发 项 目 所 用 到 的 
知识 点 进行 讲解 ,对 某 些 知 识 点 附 上 相关 的 例题 ,以 帮助 读者 理解 ,进而 
将 知识 转变 为 技能 。 
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考虑 到 是 以 “项 目 设计 ”为 核心 组 织 教学 ,所 以 在 每 一 学 期 配 有 相应 的 实 训 课程 及 项 
目 开发 手册 ,要 求学 生 在 教师 的 指导 下 ,能 整合 本 学 期 所 学 的 知识 内 容 , 相互 协作 ,综合 
应 用 该 学 期 的 知识 进行 项 目 开 发 .同时 ,在 本 套 教材 中 采用 了 大 量 的 案例 ,这 些 案例 紧密 
地 结合 书 中 的 各 个 知识 点 ,循序 渐进 ,由 浅 和 人 深 ,在 整体 上 体现 了 内 容 主 导 、 实 例 解析 、 以 
点 带 面 的 模式 ,配合 课程 后 期 以 项 目 设计 贯穿 教学 内 容 的 教学 模式 。 

软件 开发 技术 具有 种 类 繁多 .更 新 速度 快 的 特点 。 本 套 教材 在 介绍 软件 开发 主流 技 
术 的 同时 ,帮助 学 生 建立 软件 相关 技术 的 横向 及 纵向 的 关系 ,培养 学 生 综合 应 用 所 学 知识 
的 能 力 。 


二 、 丛 书 特 色 


本 套 教材 体现 目前 工学 结合 的 教改 思想 ,充分 结合 教改 现状 ,突出 项 目 面向 教学 和 任 
务 驱 动 模式 教学 改革 成 果 , 打 造 立 体 化 精品 教材 。 

(1) 参照 和 吸纳 国内 外 优秀 计算 机 网 络 、 软 件 专业 教材 的 编写 思想 ,采用 本 土 化 的 实 
际 项 目 或 者 任务 ,以 保证 其 有 更 强 的 实用 性 ,并 与 理论 内 容 有 很 强 的 关联 性 。 

(2) 准确 把 握 高 职高 专 软件 专业 人 才 的 培养 目标 和 特点 。 

(3) 充分 调查 研究 国内 软件 企业 ,确定 了 基于 Java 和 . NET 的 两 个 主流 技术 路 线 ,再 
将 其 组 合成 相应 的 课程 链 。 

(4) 教材 通过 一 个 个 的 教学 任务 或 者 教学 项 目 , 在 做 中 学 .学 中 做 ,以 及 边 学 边 做 , 重 
点 突出 技能 培养 。 在 突出 技能 培养 的 同时 ,还 介绍 了 解决 思路 和 方法 ,培养 学 生 未 来 在 就 
业 岗 位 上 的 终身 学 习 能 力 。 

(5) 借鉴 或 采用 项 目 驱 动 的 教学 方法 和 考核 制度 ,突出 计算 机 网 络 、 软 件 人 才 培 训 的 
先进 性 、 工 具 性 ,实践 性 和 应 用 性 。 

(6) 以 案例 为 中 心 , 以 能 力 培养 为 目标 ,并 以 实际 工作 的 例子 引入 概念 ,符合 学 生 的 
认 知 规律 。 语 言 简洁 明了 、 清 晰 易 懂 ,更 具 人 性 化 。 

(7) 符合 国家 计算 机 网 络 .软件 人 才 的 培养 目标 ;采用 引入 知识 点 .讲述 知识 点 .强化 
知识 点 .应 用 知识 点 .综合 知识 点 的 模式 ,由 浅 入 深 地 展开 对 技术 内 容 的 讲述 。 

(8) 为 了 便于 教师 授课 和 学 生 学 习 , 清 华 大 学 出 版 社 正在 建设 本 套 教材 的 教学 服务 
资源 。 清 华 大 学 出 版 社 网 站 (www. tup. com. cn) 免 费 提 供 教 材 的 电子 课件 、 案 例 库 等 
资源 。 

高 职高 专 教育 正 处 于 新 一 轮 教学 深度 改革 时 期 ,从 专业 设置 课程 体系 建设 到 教材 建 
设 ,依然 是 新 课题 。 希 望 各 高 职高 专 院 校 在 教学 实践 中 积极 提出 意见 和 建议 ,并 及 时 反馈 
给 我 们 。 清 华 大 学 出 版 社 将 对 已 出 版 的 教材 不 断 地 修订 、 完 善 ,以 便 提高 教材 质量 ,完善 
教材 服务 体系 ,为 我 国 的 高 职高 专 教育 继续 出 版 优秀 的 高 质量 的 教材 。 
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随 着 社会 的 发 展 , 传 统 的 教学 模式 已 难以 满足 人 才 培 养 需要 。 一 方 
面 , 大 量 毕 业 生 无 法 找到 满意 的 工作 ; 另 一 方面 ,用 人 单位 却 在 感叹 无 法 
招 到 符合 职业 需求 的 人 才 。 因 此 ,从 传统 的 偏重 知识 传授 的 方式 向 注重 
就 业 能 力 培养 ,并 让 学 生 有 兴趣 学 习 、 轻 松 学 习 , 已 成 为 大 多 数 高 等 院 校 
及 高 .中 等 职业 技术 院 校 的 共识 。 

教育 改革 首先 是 教材 的 改革 ,为 此 ,我 们 与 许多 教师 探讨 当前 教育 面 
临 的 问题 和 机 遇 , 然 后 聘请 具有 丰富 教学 经 验 的 一 线 教师 编写 了 这 本 以 
项 目 案例 为 驱动 的 网 页 设计 教材 。 

一 本 好 教材 ,应 该 易 教 . 易 学 ,让 学 生 轻松 学 到 实用 的 知识 ;一 本 好 教 
材 , 应 该 内 容 安排 合理 、 新 颖 、 实 用 ;一 本 好 教材 ,应 该 概念 准确 ,语言 精 
练 ,讲解 通俗 易 懂 ;一 本 好 教材 ,应 该 图 文 并 茂 ,案例 丰 富 、 典 型 。 具 体 来 
说 ,本 书 具 有 以 下 几 个 特点 。 

(1) 技术 较 新 ,讲解 细致 : 全 面 ` 细 致 地 展示 了 HTML 5 的 基础 知 
识 , 让 读者 能 够 真正 学 习 到 HTML 5 最 实用 、 最 流行 的 技术 。 

(2) 精心 设计 结构 , 易 教 易学 : 本 书 按照 “知识 储备 一 素材 收集 一 任 
务实 施 一 知识 归纳 ”的 思路 编排 章节 结构 。 在 讲解 各 案例 内 容 时 ,首先 通 
过 “知识 储备 ”让 学 生 快 速 了 解 案 例 的 制作 思路 ,然后 通过 “任务 实施 ”让 
学 生 系 统 地 学 习 案例 的 制作 过 程 ,接着 通过 “知识 归纳 ”让 学 生 学 习 相 关 
基础 知识 。 每 个 单元 的 最 后 ,通过 “任务 拓展 ”让 学 生 练 习 并 巩固 所 学 知 
识 ,增强 实战 能 力 。 

(3) 精心 设计 案例 ,符合 教学 需要 : 本 书 的 案例 主要 分 为 三 类 ,其 
中 知识 储备 、 任 务实 施 和 任务 拓展 中 的 案例 具有 操作 简单 、 针 对 性 强 、 
符合 实际 应 用 等 特点 ;最 后 一 章 的 综合 案例 则 是 网 页 设计 知识 点 的 综 
合 应 用 ,具有 专业 性 强 、 设 计 精 美 等 特点 ,目的 是 提高 学 生 的 综合 实战 
能 力 。 

(4) 精心 安排 内 容 , 符 合 岗位 需要 : 本 书 精心 挑选 与 实际 应 用 紧密 相 
关 的 知识 点 和 案例 ,从 而 让 读者 在 学 完 本 书后 ,能 够 马上 在 实践 中 应 用 所 
学 到 的 技能 。 

(5) 语言 精练 ,通俗 易 懂 : 本 书 在 讲解 知识 点 时 ,力求 做 到 语言 精练 ， 
通俗 易 懂 。 
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本 书 配 有 精美 的 教学 课件 和 素材 等 教学 资源 ,可 供 读者 下 载 。 

本 书 由 于 莉莉 、 尹 树 萍 担任 主编 , 刘 玲 惠 、 潘 新 艳 担 任 副 主编 。 由 于 编者 学 识 水 平和 
实践 经 验 有 限 , 书 中 玻 漏 及 错误 之 处 在 所 难免 , 敬 请 广大 读者 批评 .指正 ,以便 进一步 修订 
和 完善 。 





编 者 
2018 年 2 月 


单元 1 个 人 博客 主页 一 一 Axure 原型 设计 与 网 站 开发 入 门 


任务 1-1 用 Axure 站 点 地 图 管理 页 面 一 一 Axure 
原型 设计 概述 - 5 


任务 1-2 个 人 简历 页 面 一 一 网 站 环境 和 本 地 站 点 的 创建 
任务 1-3 心情 日 记 一 一 开发 工具 介绍 及 网 站 开发 总 体 


讲解 … 
单元 2 美丽 鲜花 网 店 一 一 HTML 标签 与 CSS 样式 基础 


任务 2-1 制作 鲜花 网 页 结构 一 一 HTML 标签 介绍 …………… 


任务 2-2 修饰 鲜花 网 页 一 一 CSS 样式 基础 … 


单元 3 ”新闻 系统 网 站 一 文字 在 网 页 中 的 应 用 PP 


任务 3-1 企业 产品 介绍 页 面 一 一 设置 文字 样式 … 


任务 3-2 行业 新 闻 文章 页 面 一 一 设置 段落 和 其 他 





文字 样式 … 


单元 4 艺术 休闲 散文 页 面 一 一 Axure 交互 效果 与 图 像 


在 网 页 中 的 应 用 


任务 4-1 散文 集 一 设置 图 文 混 排 效果 ……………………… 
任务 4-2 ”童话 故事 一 “设置 网 页 背景 元 素 ……………………… 


单元 5 通讯 录 分 组 表 一 一 表格 构建 网 页 
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任务 5-2 用 户 信息 统计 页 面 一 一 CSS 设置 边框 及 
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单元 6 商品 网 一 一 菜单 制作 





任务 6-1 仿 当 当 网 书籍 莱 单 一 纵向 列表 菜单 …………… 
任务 6-2 仿 天 猫 商品 全 单一 横向 列表 菜单 ……………… 
任务 6-3 “ 仿 阿 里 巴巴 集团 商品 菜单 一 -下拉 列表 菜单 ………… 
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单元 7 注册 页 面 一 一 Axure 动态 面板 与 表单 在 网 页 中 的 应 用 ppp 


任务 7-1 仿 蜜 淘 全 球 购 网 站 登录 界面 一 一 表单 结构 


任务 7-2 仿 蜜 淘 全 球 购 注册 页 面 一 使 用 CSS 控制 表单 ee 


单元 8 电影 音乐 页 \ 音 频 .动画 





任务 8-1 微 视频 网 页 展播 一 视频 播放 页 面 ee 


任务 8-2 ”婉约 配乐 页 面 一 一 页 面 中 播放 音乐 


任务 8-3 动画 网 页 一 -页面 中 插入 动画 eee 
单元 9 旅游 景点 网 站 一 一 Axure 低 保 真 原型 设计 与 CSS 模型 结构 的 标准 文档 流 …… 
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任务 9-2 制作 旅游 网 正文 一 一 应 用 标准 文档 流 


单元 10 ”校园 课程 类 网 站 一 -CSS 定位 布局 pe 


任务 10-1 校园 新 闻 页 面 一 一 常用 浮动 布局 方法 
任务 10-2 课程 介绍 页 面 一 一 CSS 定位 属性 布局 


单元 11 多 肉 植物 商城 一 一 JavaScript 应 用 .pe 
任务 11-1 多 肉 植物 图 蔡 换 一 一 JavaScript 图 片 切换 特效 …………………… 


任务 11-2 美丽 鼠标 影 一 一 鼠标 类 特性 
任务 11-3 图 片 变换 一 一 滚动 图 片 效 果 


单元 12 ”旅游 胜地 宣传 单一 Photoshop 平面 设计 和 ee 


任务 12-1 海岛 旅游 胜地 一 一 图 像 处 理 基础 
任务 12-2 宣传 单 设计 一 一 绘制 与 编辑 图 像 


单元 13 ”广告 类 设计 一 一 Photoshop 平面 设计 
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任务 13-2 ”咖啡 广告 一 一 通道 与 滤 镜 
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单元 1 个 人 博客 主页 一 一 Axure 原型 
设计 与 网 站 开发 入 门 


随 着 互联 网 的 普及 ,网 站 是 信息 传播 工具 ,人 们 通过 它 来 发 布 自己 想 要 公开 的 资讯 及 
提供 相关 的 网 络 服务 。 许 多 公司 都 有 自己 的 网 站 ,用 于 宣传 公司 或 发 布 产 品 信息 ,个 人 网 
站 和 博客 已 经 不 再 神秘 , 越 来 越 多 的 网 友 想 拥有 自己 的 一 个 网 站 ,或 为 兴趣 聚集 一 帮 至 交 
好 友 。 网 站 应 该 怎么 建立 呢 ? 先 用 Axure 原型 设计 ,以 用 户 为 中 心 的 思想 贯穿 整个 产品 
项 目 ,快速 构建 出 产品 原型 ,也 就 是 产品 项 目前 的 简单 框架 ,然后 再 由 网 站 编辑 ,程序 员 ， 
应 用 网 站 开发 流程 来 完成 网 站 建设 。 

教学 目标 : 

。 安装 ,注册 、 汉 化 Axure 软件 。 

。 了 解 Dreamweaver 工作 环境 及 使 用 方法 ,能 够 创建 站 点 并 新 建 网 页 。 


任务 人 1 用 Axure 站 点 地 图 管理 页 面 一 一 
Axure 原型 设计 概述 


【知识 储备 】 

1. 认识 Axure 

Axure 是 一 个 快速 的 原型 工具 ,主要 是 针对 负责 定义 需求 .定义 规格 .设计 功能 .设计 界 
面 的 专家 ,包括 用 户 体验 设计 师 (UX)、 交 互 设 计 师 (UD 、 业 务 分 析 师 (BA)、 信 息 架 构 师 
(IA) ,可 用 性 专家 (UE) .产品 经 理 (PM) 。Axure 能 快速 地 进行 原型 设计 ,让 相关 的 人 员 进 
行 体验 和 验证 ,向 用 户 进行 演示 、 沟 通 交 流 以 确认 用 户 需 求 , 并 能 自动 生成 规格 说 明文 档 。 

2. Axure 与 网 站 页 面 的 关系 

根据 项 目的 大 小 、 类 型 .工期 及 用 户 的 需求 来 选择 设计 原型 ,描述 清楚 系统 的 功能 结 
构 和 基本 交互 效果 。 为 方便 项 目 组 人 员 沟 通 交 流 , 可 以 采用 低 保 真 原 型 设计 ; 当 需 要 演示 
系统 交互 效果 或 者 展示 设计 效果 ,可 以 采用 高 保 真 原型 设计 。 最 后 根据 用 户 确认 的 原型 
设计 和 演示 效果 ,项 目 组 人 员 进 行 网 站 的 编写 ,将 原型 设计 效果 转换 为 网 站 的 页 面 效果 。 

3. Axure RP 的 安装 、 汉 化、 注册 及 软件 界面 

1) Axure RP 的 安装 

(1) 双击 Axure RP-Pro-Setup. exe 文件 , 即 如 图 1-1 所 示 的 Axure RP 7. 0 软件 图 标 ， 
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打开 安装 初始 化 界面 ,由 于 系统 语言 的 兼容 性 问题 会 出 现 乱码 ,但 并 不 影响 软件 的 安装 和 
使 用 。 开 始 安装 Axure RP 7.0, 如 图 1-2 所 示 。 

















InstallAware *2x°70p? 
曾 Tliere our Y, 
OO 
mm AxureRP-Pro-Setup.exe 
es 
图 1-1 Axure RP 7.0 软件 图 标 1-2 开始 安装 Axure RP 7.0 


(2) 在 Axure RP Pro 7. 0-InstallAware Wizard 的 License Agreement 界面 中 选中 了 I 
Agree 复 选 框 ,表示 同意 Axure 安装 协议 , 单 击 Next 按钮 继续 安装 ,如 图 1-3 所 示 。 





通 Axure RP pro 70 - InstallAware Wizard [=elel %]J 





| License Agreement 





Please read the following lcense agreemenk To continue wih setup, 
you must accept the agreement. 













AXURE RP LICENSE AGREEMENT 2 


This Axure RP License Agreementis made 
between Axure Software Solutions, Inc. ("Axure”) 
and you, the Customer. on behalf of itself and any 
Permitted Affhates. The term "Party" shall refer to 
Axure and to Customer and it Permitted Affiliates. 
Accentance of this Agreement bv the parties shall 





园 1agee 





























< Back ] Next > Cancel 








1-3 同意 安装 协议 


(3) 在 Axure RP Pro 7.0-InstallAware Wizard 的 Select Destination 界面 中 选择 安 
装 存放 路 径 , 可 以 使 用 默认 的 安装 路 径 , 也 可 以 自 定义 安装 路 径 , 之 后 单 击 Next 按钮 进 
人 下 一 步 ,如 图 1-4 所 示 。 

(4) 在 Axure RP Pro 7.0-InstallAware Wizard 的 Program Shortcuts 界面 中 有 两 个 
单 选 按钮 ,选择 All Users 代表 所 有 用 户 都 可 以 使 用 ,选择 Current User Only 代表 只 有 
自己 可 以 使 用 。 选 择 第 一 个 单 选 按钮 , 单 击 Next 按钮 继续 安装 ,如 图 1-5 所 示 。 

(5) 一 直 单 击 Next 按钮 ,最 后 单 击 Finish 按钮 完成 安装 ,如 图 1-6 所 示 。 

2) Axure RP 的 汉化 

Windows 版 本 汉化 方法 : 将 下 载 的 lang 文件 夹 复制 到 Axure 安装 目录 。 最 终 lang 
包 所 在 的 目录 位 置 如 下 : C:/Program Files/Axure/Axure RP Pro 7. 0/lang/default 
(32 位 系统 ) ,C:/Program Files(x86)/Axure/ Axure RP Pro 7.0/lang/ default(64 位 系统 ) 。 


避 
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i§ Axure RP Pro 7.0 - InstallAware Wizard 西 


| 
有 Select Destination 


Setup wil install fles into the folder displayed below. 








回 














C:\Program Files [xB6]\Awure\Axure RP Pro 7.0 [Cpromse.. | 
Instal Folder 

Requied Disk Space: 41.071 KB 
Remaining Disk Space: 124.347 MB 








[CeBok |New ) (Cwmed ) 














图 1-4 选择 安装 路 径 





谭 Axure RP Pro 70 - InstallAware Wizard 所 | 回 | 要 





ea 
| 国 Program Shortcuts 








Setup wil create shortcuts in the Start Menu for Axure RP Pro 70 Please choose a 
name for the program group mn which the shortcuts wil be crested 


BProgram Group: 
Aure 





Create shortcuts for 
@ AlUsers 
© Cunent User Ony 





cock J ens)] ce 











图 1-5 用 户 使 用 权限 





谭 Axure RP Pro 7.0 - InstallAware Wizard [l=lel J] 














Completing the Axure RP Pro 7.0 
Setup Wizard 


You have successfulb completed the Axure RP Pro 7.0 Setup 
Wieard 





国 RnRERFPRG 











[cat [Bh] [ceo | 




















1-6 ”完成 安装 
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Mac 版 汉化 方法 : 汉化 前 需 启动 一 次 Mac 下 的 英文 版 ,然后 再 汉化 ,否则 汉化 后 启 
动 会 显示 程序 已 损坏 。Mac 版 的 Axure 输入 注册 码 需要 在 汉化 前 的 英文 界面 下 输入 , 汉 
化 后 再 输入 会 导致 软件 崩溃 。 

(1) 打开 “应 用 程序 "目录 ,找到 Axure RP Pro 7.0。 

(2) 在 上 面 右 击 “ 显 示 包 内 容 ”, 然 后 依次 进入 并 找到 Resources 目录 。 


(3) 将 lang 文件 夹 ( 包 含 其 中 的 default 文件 ) 复 制 到 这 个 目录 下 。 最 终 汉 化 包 所 在 的 


目录 位 置 如 下 : /Applications/ Axure RP Pro 7. 0. app/Contents/ Resources/lang/ default。 
3) Axure RP 的 注册 


(1) 打开 Axure RP Pro 7.0, 出 现 如 图 1-7 所 示 的 欢迎 使 用 软件 界面 , 单 击 “ 输 入 授 
权 密 钥 ” 按 钮 。 


Your trial has ended. 
Chck here to contnue vsng ore RP Pro 79. 


qxureRP?®.. 





1-7 欢迎 使 用 软件 界面 


(2) 在 如 图 1-8 所 示 的 “授权 管理 ”页面 中 输入 授权 用 户 和 授权 密 钥 , 单 击 “ 提 交 ” 按 
钮 ,注册 完成 。 























而 管理 授权 变 钥 [x 
而 话 镶 注册 Nere RP Pro7.0， 
返 芭 用 户 [as 
授 取 密 铜 |h624piAq7H5e6boKkML+Y4RDXSxknPak7QMJYGoxsyv7VUSThBCvDef45P 

EE 
ES 





图 1-8 “授权 管理 ”页面 
4) 软件 界面 


Axure RP Pro 7.0 安装 、 汉 化、 注册 已 完成 ,下 面 开 始 认识 软件 界面 。 软 件 界 面 大 致 
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分 为 10 个 模块 ,如 图 1-9 所 示 为 Axure RP Pro 7. 0 软件 主 界面 。 
菜单 栏 区 域 。 工具 栏 区 域 


站 点 地 图 
区 域 


控件 区 域 





母 版 区 域 











页 面 交互 区 域 
1-9 Axure RP Pro 7.0 软件 主 界面 


(1) 菜单 栏 区 域 : 与 大 部 分 的 软件 界面 一 样 ,都 是 一 些 常规 的 文件 、 编 辑 ` 视 图 等 。 

(2) 工具 栏 区域 : 是 页 面 进行 编辑 的 一 些 快 捷 操作 ,主要 有 字体 设置 .大 小 设置 、 页 
面 显示 大 小 和 Axure 本 身 自 带 的 一 些 快捷 操作 等 。 

(3) 站 点 地 图 区 域 : 呈 树 状 结构 ,可 以 添加 、 删 除 页 面 , 也 可 以 对 设计 中 的 页 面 进行 
重 命名 操作 。 

(4) 控件 区 域 : 组 件 集中 地 带 为 矩形 组 件 、 图 片 组 件 .动态 面板 组 件 等 ,使 用 方式 是 
直接 拖 动 控件 到 页 面 编辑 区 域 。 

(5) 母 版 区 域 : 共用 、 复 用 。 

(6) 页 面 编辑 区 域 : 拖 动 相关 的 控件 进行 线 框图 编辑 和 交互 具体 的 实施 。 

(7) 页 面 交 互 区 域 : 用 户 进行 操作 的 区 域 。 

(8) 控件 交互 区 域 : 组 件 的 交互 ,组 件 的 注释 编辑 。 

(9) 控件 属性 区 域 : 对 组 件 的 属性 ,样式 进行 编辑 。 

(10) 控件 管理 区 域 : 进行 控件 的 管理 。 

4. 用 Axure 站 点 地 图 管理 页 面 

站 点 地 图 区 域 位 于 软件 界面 的 左上 方 ,是 用 来 管理 页 面 和 显示 页 面 的 区 域 。 如 
图 1-10 所 示 为 用 站 点 地 图 管理 页 面 层级 。 

1) 站 点 地 图 的 结构 和 功能 

站 点 地 图 由 两 部 分 组 成 。 上 半 部 分 是 站 点 地 图 的 一 些 操作 按钮 , 称 为 功能 条 或 者 功 
能 菜单 ;下 半 部 分 是 站 点 地 图 的 页 面 ,呈现 树 状 结构 ,与 Windows 文件 存放 目录 结构 相 一 
致 ,通过 父 与 子 、 见 弟 和 兄弟 的 页 面 关 系 , 将 要 设计 的 产品 页 面 整合 起 来 ,形成 产品 的 文档 
关系 。 如 图 1-11 所 示 为 站 点 地 图 的 结构 和 功能 。 

2) 站 点 地 图 的 功能 使 用 

站 点 地 图 的 功能 使 用 包括 两 方面 内 容 , 分 别 是 功能 条 的 使 用 和 页 面 管理 。 图 标 类 型 
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3 - xs 一 一 2 
| Page 1 | Page 2 | nm | 


。 管理 软件 页 面 之 间 的 关系 
。 软件 的 骨架 ， 清 晰 展示 软件 的 结构 



































1-11 站 点 地 图 的 结构 和 功能 


选项 可 以 更 改 页 面 的 图 标 类 型 ,包括 页 面 和 流程 图 。 图 标的 更 改 并 不 会 影响 页 面 的 内 容 ， 
它 仅仅 是 更 改 了 一 个 图 标 ,便于 对 页 面 的 管理 。 

通过 生成 流程 图 菜单 选项 ,可 以 生成 纵向 或 者 横向 的 流程 图 。 如 选中 Home 页 面 ， 
然后 右 击 ,打开 如 图 1-12 所 示 的 “生成 流程 图 "对话 框 ,选择 “纵向 " 单 选 按钮 , 则 会 自动 生 
成 如 图 1-13 所 示 的 纵向 流程 图 。 











Page 1 Page 2 | Page3 


图 1-12 “生成 流程 图 ”对 话 框 图 1-13 纵向 流程 图 








从 流程 图 中 可 以 看 出 软件 的 功能 从 属 关 系 。 也 可 以 生成 横向 流程 图 ,可 以 根据 个 人 
需要 来 选择 生成 流程 图 的 类 型 。 在 站 点 地 图 中 ,可 以 通过 功能 条 来 管理 页 面 , 也 可 以 通过 
右键 菜单 选项 来 管理 页 面 ,功能 是 一 致 的 ,可 根据 自己 的 习惯 来 选择 。 
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【素材 收集 】 
实例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文件 夹 。 


【任务 实施 】 
下 面 制作 个 人 博客 网 站 并 进行 栏目 规划 ,以 便 通过 学 习 制 作 软 件 的 原型 设计 ,进一步 
理解 站 点 地 图 。 软 件 原 型 功能 划分 和 导航 菜单 一 致 ,在 制作 原型 时 ,可 以 按 导航 菜单 建立 


站 点 地 图 的 栏目 结构 。 

案例 划分 的 一 级 菜单 有 首页 ,个 人 简历 页 面 .学 生 简历 页 面 ,博客 内 容 页 面 。 其 中 , 博 
客 内 容 页 面包 含 的 二 级 菜单 为 “心情 日 记 ”“ 风 景 日 记 ”。 

下 面 打开 Axure 软件 ,开始 原型 设计 。 

(1) 将 Home 页 面 重新 命名 为 “个 人 博客 网 站 ”, 在 “个 人 博客 网 站 ”下 面 建立 4 个 页 
面 ,分 别 命名 为 “首页 “个 人 简历 页 面 “ 学 生 简历 页 面 “ 博 客 内 容 页 面 "?。 如 图 1-14 所 示 
为 个 人 博客 网 站 菜单 。 

(2) 在 “博客 内 容 页 面 ” 新 增 2 个 子 页 面 ,分 别 命 名 为 “心情 日 记 ” 和 “风景 日 记 ”。 如 
图 1-15 所 示 为 博客 内 容 页 面 的 二 级 菜单 。 





E30] Fax 二 (7) 
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图 1-14 个 人 博客 网 站 菜单 图 1-15 博客 内 容 页 面 的 二 级 菜单 


个 人 博客 网 站 结构 已 经 建立 完 ,然后 可 以 根据 结构 生成 流程 图 。 结 构 及 从 属 关系 如 
图 1-16 所 示 的 个 人 博客 网 站 流程 图 。 
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图 1-16 个 人 博客 网 站 流程 图 
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【知识 归纳 】 


通过 案例 的 学 习 , 学 会 规划 软件 的 栏目 结构 或 者 功能 模块 。 在 制作 原型 时 , 先 规划 出 
栏目 结构 ,方便 进行 软件 的 原型 设计 ,可 以 避免 在 站 点 地 图 上 随意 地 新 建 页 面 ,导致 结构 
混乱 .设计 思路 不 清晰 。 根 据 清 晰 的 站 点 地 图 ,可 以 逐一 进行 原型 设计 。 


任务 2 个 人 简历 页 面 一 网 站 环境 
和 本 地 站 点 的 创建 


知识 储备 】 
1. 什么 是 网 页 和 网 站 


网 页 其 实 就 是 一 个 文件 ,如 图 1-17 所 示 。 网 页 可 以 承载 网 页 制作 者 留 下 的 各 种 信 
息 , 然 后 通过 互联 网 传输 并 使 用 浏览 器 显示 成 页 面 ,让 不 同 的 用 户 浏览 。 
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1-17 一 个 网 页 


单元 1 个 人 博客 主页 一 Axure 原型 设计 与 网 站 开发 入 门 





网 页 中 可 以 包含 文字 、 图 像 . 表 单 、 表 格 ,动画 、 视 频 、 超 链接 等 各 种 元 素 。 

网 页 按 其 表现 形式 可 以 分 为 静态 网 页 和 动态 网 页 两 种 。 静 态 网 页 实际 上 是 图 文 结构 
的 页 面 ,浏览 者 可 以 阅读 页 面 中 的 信息 ,网 页 中 可 以 包括 GIF 图 片 、Flash 动画 、 视 频 和 脚 
本 程序 等 ,但 是 浏览 器 端 与 服务 器 端 不 发 生 交 互 操作 。 动 态 网 页 的 “ 动 ” 指 “交互 性 ”, 它 指 
浏览 器 端 和 服务 器 端 可 以 进行 交互 操作 ,大 部 分 信息 存储 在 服务 器 端的 数据 库 中 ,根据 浏 
览 者 的 请 求 从 服务 器 端的 数据 库 中 取出 数据 ,传送 到 浏览 器 端 ,然后 显示 出 来 。 

网 站 其 实 就 是 许多 网 页 的 全 集 。 许 多 网 页 系统 链接 起 来 就 组 成 了 网 站 。 通 过 超 链接 
可 以 将 网 站 中 多 个 网 页 联系 起 来 ,形成 一 个 主题 鲜明 、 风 格 一 致 的 Web 站 点 。 网 站 中 的 
网 页 结构 性 较 强 ,组织 比较 严密 。 通 常 ,网 站 都 有 一 个 主页 ,又 叫 首页 。 主 页 文件 基本 名 
一 般 为 index 或 default, 如 index. html default. html ,index. asp ,index. aspx 等 。 

2. 网 页 的 工作 原理 

网 站 发 布 到 Web 服务 器 后 ,浏览 者 通过 浏览 器 向 Web 服务 器 发 出 请 求 , Web 服务 器 
则 根据 请 求 ,把 浏览 者 所 访问 的 网 页 传送 到 客户 端 ,并 显示 在 浏览 器 中 。 一 个 网 页 的 工作 
过 程 可 以 归纳 为 以 下 4 点 。 

(1) 用 户 在 浏览 器 中 输入 网 页 的 网 址 ,例如 http://www. sjziei. com。 

(2) 客户 端的 访问 请 求 被 发 送 给 网 站 所 在 的 Web 服务 器 ,服务 器 查找 对 应 的 网 页 。 

(3) Web 将 服务 器 网 页 发 送 给 客户 端 。 

(4) 客户 端 收 到 网 页 后 ,在 浏览 器 中 显示 出 来 。 

3. 网 站 需求 分 析 

通过 了 解 网 页 .网 站 的 元 素 构 成 .来 进行 网 站 建设 方面 的 规划 。 需 求 分 析 就 是 指 在 
制作 网 页 前 首先 进行 的 一 系列 准备 活动 ,包括 市 场 调查 、 网 站 规模 、 网 站 主题 和 网 站 目 
标 群 体 4 个 步骤 ,通过 需求 分 析 可 以 确定 网 站 的 风格 及 准备 素材 等 。 

1) 市 场 调查 

了 解 目 前 最 流行 风格 的 网 站 ,对 同类 型 网 站 的 浏览 量 进行 数据 统计 分 析 , 同 时 对 经 营 
状况 进行 详细 调查 ,根据 客户 需求 确定 网 站 的 用 户 群 体 ,并 进行 制作 数据 资料 的 收集 。 

2) 网 站 规模 

网 站 有 多 大 的 规模 ,需要 包含 多 少 页 面 和 内 容 , 不 是 随心 所 欲 确定 的 ,而 是 根据 实际 
情况 来 决定 网 站 的 规模 和 大 小 。 一 般 网 站 可 以 分 为 小 型 .中 型 和 大 型 3 种 模式 。 一 般 的 
网 站 首先 从 小 规模 开始 建站 ,然后 逐步 扩大 网 站 的 规模 。 

3) 网 站 主题 

因为 不 同 主题 的 网 站 在 表现 形式 和 内 容 上 侧重 点 不 同 ,所 以 在 设计 上 侧重 点 也 不 同 。 
门户 类 网 站 所 涉及 的 内 容 非 常 广泛 ,综合 性 较 强 ,这 类 网 站 需要 大 量 的 信息 更 新 ;售后 服 
务 类 网 站 注重 功能 性 ,网 站 大 多 用 来 树立 公司 形象 和 为 客户 提供 相关 的 售后 服务 ;个 人 兴 
趣 爱 好 类 主题 网 站 侧重 个 性 化 ,相对 比较 自由 ,可 根据 个 人 特长 自由 发 挥 ;以 某 个 行业 为 
主题 的 专业 网 站 在 设计 上 应 考虑 单一 性 和 专业 性 ,信息 内 容 要 重点 突出 。 

4) 网 站 目标 群体 

网 站 类 别 不 同 , 针 对 的 用 户 群 体 也 会 不 同 。 比 如 ,门户 类 网 站 针对 大 部 分 普通 人 群 ， 
时 尚 类 网 站 主要 面向 追求 时 尚 潮流 的 人 群 。 在 制作 网 站 中 ,可 以 根据 群体 特性 的 不 同 而 
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进行 相应 的 设计 制作 。 


【素材 收集 】 


创建 网 页 ,用 记事 本 编写 代码 。 实 例文 字 内 容 、 图 片 内 容 和 效果 文件 的 保存 位 置 如 下 。 
实例 素材 位 置 :“ 单 元 1” 目 录 下 的 “文字 . txt”" 和 images 子 目 录 。 
效果 文件 位 置 :“ 单 元 1" 目 录 下 的 index. html 和 1. html。 


【任务 实施 】 
(1) 创建 第 一 个 网 页 页 面 。 打 开 记事 本 ,编写 代码 页 面 。 
(2) 参照 代码 如 下 ,编写 完 后 ,保存 为 first. html 文件 。 





<html> 

<head> 
<title> 个 人 简历 >< /title> 

< /head> 

<body> 
<h2> 个 人 简历 < /h2> 
<p> 是 求职 者 给 招聘 单位 发 的 一 份 简要 介绍 ,包含 自己 的 基本 信息 : 姓名 \ 性 别 \ 年 龄 、 
民族 ,籍贯 政治 面貌 学历、 联系 方式 ,以 及 自我 评价 .工作 经 历 、 学 习 经 历 、 荣 誉 与 成 
就 求职 愿望 .对 这 份 工 作 的 简要 理解 。< /p> 
<h2> 精 简 < /h2> 
<p> 一 般 人 事 部 门 的 经 理 往往 会 收 到 堆积 如 山 的 简历 ,他 们 根本 没有 太 多 的 时 间 仔 细 
看 一 份 漫长 的 简历 。 如 果 你 寻求 一 个 专业 或 技术 职位 , 写 上 一 两 页 的 简历 是 正常 的 。 
一 位 忙碌 的 人 事 经 理 根本 无 暇 顾及 你 那 份 超过 两 页 的 简历 ,而 简短 的 简历 往往 又 比 元 
长 的 简历 难 写 。 所 以 你 可 以 将 写 出 来 的 漫漫 简历 尽量 压缩 ,使 之 简短 有 力 。< /p> 
<h2> 表 达能 力 < /h2> 
<p> 毕 业 生 制作 个 人 简历 时 一 定 要 尽情 地 表现 你 自己 ,而 不 是 别人 。 在 你 的 个 人 简历 
中 展现 你 的 技能 ,并 用 你 自己 取得 的 成 果 证 明 它们 。 如 果 你 写作 表达 能 力 差 ,最 好 请 
写作 能 力 比较 强 的 人 帮忙 ,你 可 以 通过 自己 口述 的 方式 让 别人 边 听 边 写 ,用 合适 的 词 
来 描述 你 自己 。 另 外 , 写 简 历 不 必 拘 泥 于 格式 : 简历 是 你 自己 的 简历 ,所 以 不 管 你 写 
什么 ,只 要 看 着 合情合理 就 行 。 个 人 简历 最 好 实话 实说 地 介绍 自己 ,过 高 地 虚 夸 或 者 
是 过 于 谦虚 都 不 好 。< /p> 
<h2> 关 注 要 点 < /h2> 
<p> 在 个 人 简历 中 要 重点 强调 你 的 特别 技能 以 及 所 取得 的 成 就 和 证 书 。< /p> 
<h2> 关 注 条 件 < /h2> 
<p> 对 于 用 人 单位 来 说 ,简历 是 第 一 关 , 面 试 才 是 第 二 关 。 在 简历 中 ,人 事 经 理 往往 会 
侧重 于 观察 简历 是 否 已 经 达到 了 招聘 条 件 , 如 果 达 到 了 则 会 考虑 通知 当事人 来 面试 。 
所 以 ,在 写 简历 时 一 定 要 关注 对 方 的 招聘 条 件 , 并 在 自己 所 写 的 简历 中 努力 达到 对 方 
所 要 求 的 水 平 。< /p> 

< /body> 

</html> 











(3) 双击 first. html 文件 ,页 面 效 果 为 如 图 1-18 所 示 的 个 人 简历 页 面 。 
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个 人 简历 
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图 1-18 个 人 简历 页 面 


【知识 归纳 】 


通过 本 任务 的 练习 ,可 以 掌握 HTML 5 中 的 语义 化 标签 使 用 ,能 够 完成 页 面 的 编码 ， 
理解 页 面 结构 ,探析 实际 开发 中 使 用 的 设计 方法 。 


任务 人 3 心情 日 记 一 开发 工具 介绍 及 
网 站 开发 总 体 讲 解 


【知识 储备 】 


在 制作 网 页 之 前 ,都 要 建立 一 个 本 地 站 点 ,以 方便 管理 网 站 文件 。 学习 Dreamweaver 
基础 部 分 ,要 求 熟练 应 用 。 

Dreamweaver 开发 工具 的 工作 环境 介绍 如 下 。 

1. 工作 环境 

Dreamweaver 中 的 文件 管理 可 以 帮助 设计 者 方便 、 快 捷 地 管理 网 站 文件 ,不 仅 可 以 
像 资源 管理 器 一 样 操作 文件 ,还 可 以 实现 站 点 的 上 传 和 下 载 ,完成 站 点 的 远程 管理 。 

(1) 启动 Dreamweaver 后 ,默认 情况 下 将 进入 起 始 页 ,如 图 1-19 所 示 。 
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图 1-19 Dreamweaver 起 始 页 


(2) 单 击 起 始 页 的 “新 建 Html”, 创 建新 页 面 ,进入 如 图 1-20 所 示 的 Dreamweaver 工 
作 界 面 。 
应 用 程序 栏 
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图 1-20 Dreamweaver 工作 界面 
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(3) Dreamweaver 工作 界面 中 的 常用 功能 区 如 下 。 
@ 如 图 1-21 所 示 为 文档 窗口 。 


Dw x mel Sem SAD pew gsio) el xs9 BIW Hi | 























1-21 文档 窗口 


@ 如 图 1-22 所 示 为 文档 工具 栏 。 
在 浏览 器 中 预览 /调试 文件 管理 





图 1-22 文档 工具 栏 


@ 如 图 1-23 所 示 为 代码 工作 区 。 


<!doctype html> 
<html> 


<head> 
<meta charset="utf-8"> 
<title> 专 业 婚 礼 机 构 </title> 
le.css" rel="stylesheet" type="text/css" /> 
‘ext/javascr ipt" src="imgapper.js"></script> 
"> 






imgapper .scroll(4, "banner_List", "List", "banner_info"); 


</script> 
<style type="text/css"> 

#banner {position: relative; width:725px; height:219px; border:1px solid #666; overflow:hidden;} 

#banner_bg {position:absolute; botton:6px; background-color:#866;height:27px; filter; Alpha(Opacity=38); opacity:8.3; 
z-index: 1900; cursor 3} 

#banner_info {positi ; ine-height:27px; color:sfff; z-index:1961} 

#banner ul {position:absolute; list-style-type:none; filter: Alpha(Opacity=75); opacity:8.75; border:1px solid #fff; 
z-index:1902; margin:0; 


让 








图 1-23 ”代码 工作 区 


@ 如 图 1-24 所 示 为 状态 栏 。 


标签 选择 器 手机 大 小 窗口 大 小 
平板 电脑 大 小 一 | | 
台式 计算 机 大 小 
图 1-24 状态 栏 


@ 如 图 1-25 所 示 为 属性 检查 器 。 





1-25 属性 检查 器 
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@ 如 图 1-26 所 示 为 “插入 ”面板 。 

2. 创建 Dreamweaver 站 点 

在 使 用 Dreamweaver 搭建 站 点 前 ,需要 先 在 自己 的 计算 机 中 创建 一 个 以 英文 或 数字 
命名 的 空 文件 夹 来 作为 网 站 的 根 文件 夹 。 本 案例 为 D 盘 根 目 录 下 新 建文 件 夹 “My Web” 
作为 网 站 文件 夹 。 接 着 创建 站 点 ,选择 “站 点 "菜单 , 单 击 “ 新 建站 点 ”按钮 。 如 图 1-27 所 
示 为 创建 站 点 的 基本 界面 及 “文件 ”面板 。 





图 1-26 “插入 ”面板 图 1-27 创建 站 点 的 基本 界面 及 “文件 "面板 


在 “文件 ”面板 中 创建 站 点 ,具体 方法 为 选中 “文件 ”面板 中 用 来 保存 网 页 或 文件 夹 的 
区 域 , 右 击 ,在 弹出 的 快捷 菜单 中 选择 “新 建文 件 "命令 ,然后 给 文件 命名 。 如 图 1-28 所 示 
为 在 “文件 "面板 中 新 建 了 一 个 网 页 文件 。 在 文档 窗口 中 将 其 打开 ,如 图 1-29 所 示 即 为 新 
文档 页 面 ,然后 开始 对 其 进行 编辑 。 

















四 1 个 本 地 项 目 被 选中 ,总共 126 - [卓志 = L 
图 1-28 在 “文件 ”面板 中 新 建 网 页 文件 


单元 1 个 人 博客 主页 一 Axure 原 型 设计 与 网 站 开发 入 门 








图 1-29 新 文档 页 面 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 配套 的 素 
材 文件 夹 。 


【任务 实施 】 


具体 制作 网 页 ,分 为 构建 HTML 结构 和 设置 CSS 样式 属性 两 部 分 来 进行 。 

1) 构建 HTML 结构 

(1) 创建 站 点 的 本 地 磁盘 文件 夹 。 

(2) 启动 Dreamweaver CS, 打 开 * 文 件 ?面板 ,在 站 点 中 创建 一 个 名 为 index. html 文 
档 , 并 将 其 打开 。 

(3) 打开 素材 文件 ,将 文件 内 容 输入 或 复制 至 页 面 编辑 文档 中 。 如 图 1-30 所 示 为 页 
面 文字 和 内 容 代 码 。 

(4) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 

2) 设置 CSS 样式 属性 

(1) 页 面 中 引入 CSS 样式 的 属性 方法 。 在 “一 head>><</head> ”标签 对 之 间 输 入 以 
下 代码 。 
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:DTIEE heal RBLIC -RCI YET 1.0 Transitional/ /EN 
“hesps/ /wow v3. org/TR/ htel1/CTD/ sbtell -transitional .dod"> 


<html eloe="https/ fm cr/ /ten> 









eady 
es y="Coarart-Type" carteat="tert/hral; charsec-trf-g /> 
teley 个 人 二 六 一 本 昌 jeanies 

/ies 





,了 皇后 
Bi. Er 灾情 。 对, 县: /py 
< 17 才 97 了 7 攀 cH 之 对 DS 避 开 从 一 年 冤 fS: 更 二 只， 加 曲 你 


和 本本， 那 避 为 有 有 人 在 各 人 了 拉 ， 





一 下 地 史 痪 生 尖 
和 


外 弹 , 好 全 不 I 昌 一 主 。 皮 术 入 和 起来 了 当 后， 万 六 呈 半生 工作- 志 各 种 秩 迭 阮 :小 闪 
后 
a 

玖 要 ,|[ 了 有 人 和 一 。 而 后 ， 拓 基 引 下 ， 丰 行政 上 人 于 了 最 训 到 ， 任 芝 全 2 
上 对 | 这 ，- 又- 和 ,对 xc= 兴 江 尖 到了 旬 人 拷 过 民 。 所 1 

有 本 本， 要 9 及 的， 人 可 有 后: 天 caze， 一生 信 玖 ， 

天 A 的 E125 了 这 一 切 。 在 机 上 ， 由 是 了 表 间 入 演化 ,对 人， 志和， 外 

玫 而 当下。j0 和 和 并 下 下 去 ， 祝 可 到 有 人 不 生 到。<py 

p> 村 加 局 当 年 的 大 可是 几 听 ， 扫 5 者 只 座 多 了 ，， 这 全 上 所 ,这 一句 相 新 

老大 给 泊 了 琴 。 如 分， 泊 重 六 上 过 开始 ， 从 坊 雪 黑 开 鸠 ， 节 党 到 下 在 ， 一 乱 人 工 作 世 有 人 内江 
角力 也 月 人 凋 电 ， 人 人 并 小 和， 闻 妈 本 让 和 i 刘 ， 生 其 名 不 care， 所 不 下 于 这 震 ， cp 
> 这 二 的 - 茹 ， 在 四 8 用 闪光。 村 志 二 二 和 等， 则 果 ， 但 对 去 术 生 可 关 环 ， 让 

人 本 中 </p> 

p> 这 h 和 入 天 全 下 厅 和 和 和 二 己 相 外 ， 面 到 于 示 ， 总 轩 打 民事 司 |[ 吉 

已 人 -吉首 比 区， 4， 其 尖 生 下 吾 昌 但 忆 攻 刘 有 Rd， 和 和 
人 也 庆生 区 机 只 ,和 所 村 用 ， 划 ,多 天 二 *</p> 

py 六， 不 和 0 加 所， 放学， jese enyoy mgpr ov cypy 

oj 

dora 
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好 春光 ， 不 如 梦 一 场 
2017-04-12 18:1420 作者 ，cinoy 未 源 ， 饰 休 环 洁 


春天 ， 应 该 是 适合 恋爱 吧 ， 阳 光明 妖 ， 鲜 花 满 枝 ， 吴 嗜 青 ， 取 取 山 ， 都 别 有 趣 味 。 连 峰 
都 开始 有 了 恋情 。 对 ， 那 都 是 别人 的 春天 。 


2017 才 过 了 四 分 之 一 ， 我 已 经 感受 到 这 一 年 的 不 易 。 微 博 说 ， 如 果 你 一 直 孝 感觉 生活 很 
容易 ， 那 是 因为 有 人 在 普 你 承担 。 


六 人 所 有 自欺欺人 的 坚强 ,都 是 不 堪 

是 第 一 年 工作 一 起 备课 的 时 候 。 那 时 候 的 我 ， 对 孝 

i i 源源 不 断 ， 创 重 十 足 ， 信 心 十 足 ， 我 能 够 

全 ya 点 ， 我 可 以 坐 电脑 前 一 坐 一 下 午 ， 丝 毫 没 有 觉得 时。 当年 的 
F 2 国 :二 访 ， 新 需 兴 角 ， Wh Ee 人 


则 ， 任 劳 任 息 的 二 把 手 ， 每 天 晚上 加 班 字 ， 一 饥 又 - 对 Excel 的 擎 
7 A eh ey 也 有 将 后 
人 一 副 单 纯 的 不 语 世 ! 样 ， 天 大 的 运 : 了 这 一 切 。 在 酒 

饭 拉 文化 , 区 re es a 也 必须 有 个 好 


证 了 所 有 的 4 
| 诅 主人， 我 起 ， 应 该 也 不 | 


ea 二 如 ,旅行 ， 吃 书 ， 这 一 切 

| 都 是 前 老大 融 给 我 的 殊荣 ， 我 重新 从 零 开始 ， 从 最 底 县 开始 ， 也 做 到 现在 , 一 路 
A A 虽然 总 会 到 点 小 人 ， 夺 取 你 所 有 的 劳动 所 果 ， 
但 是 我 也 不 care， 我 根本 不 在 卑 这 些 ， 


清和 Ti 其 实 过 去 也 很 苦 ， 很 时， 但 是 浓 党 的 成 就 感 和 光环 ， 
总 是 让 人 容易 迷失 自 


这 几 年 的 生活 Le 基 的 时 民生 和 自己 相 二 面 对 孤 独 ， 总 要 折 喘 些 事情 才 
比如 ， a 比如 ， 学 美 请。 生活 不 容易 ， 偶 外 
侦 处 也 绝望 想不开 ， 介 是， 总 有 雨 过 天 铺 箭 。 


好 春光 ， 不 如 梦 一 场 。 别 计较 太 多 ，just enjoy right now 








图 1-30 页 面 文字 和 内 容 代码 


16 


单元 1 个 人 博客 主页 一 Axure 原型 设计 与 网 站 开发 入 门 








< style type= "text/css"> 
长 各 
= 

</style> 





(2) 设置 CSS 样式 属性 对 应 整体 页 面 中 的 背景 文字 元 素 代码 。 





<style type= "text/css"> 
body {background- image: url (bg.png);} 


h2,h5{ 
text-align:center; 
Color: #F60;} 

p{ 


text- indent :2em; 

font- size:12px; 

color: #006; } 
</style> 











(3) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 可 见 添加 CSS 样式 属性 页 面 效 果 , 如 图 1-31 所 示 ; 也 可 应 用 拆 分 区 编 
辑 代 码 和 文字 ,如 图 1-32 所 示 。 


PE_ EE EE Ee 
口 个 人 博客 -- 心 情 日 记 x 


© 3 © DD/MyWeb/index.html 


好 春光 ， 不 如 上 梦 趟 场 


2017-04-12 18:14:20 作者 : cinoy 来 源 : 希 依 是 舍 


























出 春天 ， 应 该 是 适合 恋爱 吧 。 阳 光明 如， 铝 花 菏 枝 ， 沙 渚 青 ， 吧 乳山 ， 都 别 有 趣味 。 连 冉 都 开始 有 了 恋情 。 对 ， 那 都 是 
ME 2017 年 才 过 了 四 分 之 一 ， 我 已 经 感受 到 这 一 年 的 不 易 。 微 博 说 ， 如 果 你 一 直 都 感觉 生活 很 容易 ， 那 是 因为 有 人 在 普 你 


生活 ， 工 作 ， 感情 ， 健 康 ， 接 二 连 三 。 你 慢 慢 会 发 现 ， 所 有 自 其 散人 的 坚强 ， 都 是 不 堪 一 击 。 昨 晚 和 捷 聊 起 了 当 
年 ， 尤 其 是 第 一 年 工作 一 起 备课 A 外 候 。 屠 时候 的 我 ， 对 教学 有 荡 藻 的 能 鱼 ， 总 党 得 有 很 多 教学 的 点 子 ， 源 源 不 断 ， 创 意 
二 中 ,信心 十 足 。 我 能 够 一 个 人 做 幻灯 片 做 到 网 上 一 点 ; 我 可 以 在 计算 机 前 坐 一 下 二， 丝毫 没有 觉得 累 。 当 年 的 我 , 初出 
戈 户 ,党 露头 角 ， 博 得 了 很 多 个 第 一 。 而 后 ， 我 转 到 行政 ， 在 行政 上 做 到 了 最 高 级 别 ， 任 劳 任 总 的 二 把 手 ， 每 天 晚上 加 
班 ， 对 着 一 堆 救 字 ， 一 遍 又 一 遍 ， 对 Excel 的 掌握 也 到 了 炉火纯青 的 境界 *。 所 有 人 都 对 我 另 眼 相 看 ， 有 拍 马 | 
的 ， 也 有 背后 讨论 的 , 我 部 不 eere。 一 副 单纯 的 不 请 世事 的 模样 , 天 大 的 运气 ， 让 我 经 历 了 这 一 切 。 在 酒 点 上 ,见证 了 所 有 
Bm 对 各 种 中， 各 种 在， 相当 老 到 * 当然 ,也 必须 有 个 好 酒量 。 如 果 我 按时 路 直 下去， 我 相 ,应 该 也 不 








捷 回 忆 我 当年 的 杖 态 永远 都 星 在 吃饭 ， 永 远 都 在 叫 又 喝 多 了 。ik 歌 ， 旅 行 ， 吃饭 ， 这 一 切 都 是 前 老大 带 给 我 的 蜂 荣 
如 今 ， 我 重新 从 和 开始 ， 从 最 底层 开始 ， 也 做 到 现在 ， 2 光世 有 收 主 ， 能 力也 有 人 肯定 ， 虽然 名 会昌 到 点 小 作 ， 
夺取 你 所 有 的 劳动 成 果 ， 他 我 根本 不 在 平 这 些 。 


过 去 的 一 切 ， 在 回忆 里 都 闪 着 光 。 其 实 过 去 也 很 苦 ， 很 累 ， 但 是 ;家 家 的 成 就 感 和 光环 ， 总 是 让 人 容易 迷失 自己 。 


这 几 年 的 生活 ， 慢 慢 沉 下 来 ， 更 多 的 时 候 是 和 自己 相处 ， 面 对 琉 种 ， 总 要 折腾 些 事情 才能 让 自己 开心 一 点 。 比 如, 发 
区 的 和 比如 , 学 英语 。 生 活 不 容易 ， 偶 尔 被 庄 得 喘 不 过 气 ， 偶 尔 也 会 在 深夜 病 六 ， 偶 尔 也 绝望 想不开 ， 但 是 ， 






好 春光 ， 不 如 梦 一 场 。 别 计较 太 条 ，just enjoy right now 








图 1-31 添加 样式 页 面 


好 
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好 春光 ， 不 如 梦 一 场 


2017.0412 18:14:20 作者 :cinoy 来 源 : 乞 依 是 舍 











春天 ， 应 该 是 适合 立 要 吧 。 阳 光明 姬 ， 阁 苍 贡 枝 ， 豆 刺青， 吧 肥 山 ， 都 别 有 趣 味 * 连 几 
始 有 了 恋情 。 对 ， 那 都 是 别人 的 春天 。 


201) 年 才 过 了 四 分 之 一 ， 我 已 经 感受 8 这 一 年 的 不 易 。 微 博 说 ， 如 果 你 一 直 都 感觉 生活 | 
很 容易 ， 必 是 因为 有 人 在 莹 你 承担 。 


5 心情 日 记 </title> 
Batyle type="text/css"> 

0 boay backyround-inage: url (bg.png); 
8 

日 































es 
ra Fexr-alignzcenrer: 生活 ,工作 ， 健康 ， 按 二 广 三 。 你 慢 慢 会 发 现 ， Me 都 是 不 增 | 
Er color: #F607} 。 昨 晚 和 技 聊 起 了 ; 和 大 是 第 一 年 工作 一 起 备课 创 时 假 。 那 时 忆 的 我 ， 对 教学 有 薄 茵 的 
pt 能 旦 ， 总 党 得 有 很 条 教学 的 点 子 ， 源 产 不 灯 信心 本 eh 
5 史上 一 ; 人 没有 觉得 累 。 当 年 的 我 ， 初 出 茅 庆 
得 了 很 多 个 第 一 。 而后， 我 转 到 行政 ， 在 : 估 到 了 最 间 引 ， 有 劳 任 和 的 二 





行 a 

加 隆 ， i 下 识 ， 对 Exes9 尘 所 也 到 了 炉灶 车 凶 坊 四。 i 

人 有 天幕 的 ， 也 有 背后 计 论 的 , 我 都 不 care。 一 副 单 纯 的 不 请 世事 的 模样 ,天 - 

历 了 这 一 切 。 在 枉 桌 上 ， 见 证 了 所 有 的 饭桌 文化 ， 对 各 种 劝 枉 ,各 种 酒 , 相当 
到 。 当 儿 re 我 起 ， 应 该 也 不 档 吧 。 


接 加 忆 我 当年 的 捧 态 永远 ; 饭 ， 永 运 都 在 叫 ee 弛 X， 旅行， 虑 饭 ， 这 一 1 
是 前 老大 芝 给 我 的 厌 荣 。 如今， 我 重新 从 地 开 始 ， 从 最 底层 开始 ， 世 做 到 现在 ， 一 路 的 工作 世 
ep a 星 然 总 会 昌 到 点 小 人 ， 寺 所 有 有志 果 ， 但 是 我 也 不 care, 利 





/styie> 
heaa> 





boay» 
吾 2> 好 看 不 如 一 场 /h2> | 
<h5y2017-04-12 18:14:20 作者 : cinoy ”来源 : 千 依 吓 舍 


a 
Be 阳光 明媚 ， 坪 花 其 梳 ， 踏 著 至 ， 阳 降 山 ， 

25 i 连 凡 并 拘 有 了 交情 * 对 , 那 都 是 别人 的 春天 。 </p> 

26 7 ， 起 已 经 晤 受 一 年 的 不 易 。 微 博 涪 ， 


9 一直 邦 感觉 生活 很 容易 ， 那 是 因为 有 人 在 普 你 承担 。</p> 
9 <p> 生活 ， 工 作 ， 不 人情， 健康， 接二连三 。 你 慢 慢 会 发 现 ， 所 有 自 其 散人 


全 的 坚强 ， 都 是 不 堪 一 击 。 昨 晓 和 捷 了 起 了 当年 ， 尤 其 是 弟 一 年 工 
作 一 起 备课 的 时 候 。 那 时 候 的 我 ， 对 教学 有 区 贡 的 能 量 ， 己 营 得 有 很 
多 教学 的 点 子 ， 源 源 不 断 ， 创 意 十 足 ， 信 心 十 足 。 我 能 够 一 个 人 依 幻 
力 片 做 到 晚上 一 点 ， 我 可 忆 在 计算 机 前 坐 一 下 午 ， 丝 毫 没有 觉得 累 。 
当年 的 我， 初出 茅 访 ， 索 吉 头 角 ， 博 得 了 很 多 个 第 一 。 而 后 ， 我 转 到 
行政 在 行政 上 做 到 了 最 高 级 别 ， 任 劳 任 站 的 二 把 手 ， 每 天 晚上 加 注 
， 对 着 一 堆 孝 字 ， 一 遍 又 一 沉 ， 对 Exce1 的 掌 音 也 到 了 炉 从 纯 青 的 境 
界 。 所 有 人 者 时 我 另 眼 相 看 ， 有 拍马屁 的 ， 有 甘 药 的 ， 也 有 背后 讨论 


1-32 ” 拆 分 区 页 面 





过 去 的 一 切 ， 在 四 忆 时 都 攻 者 其 实 过 去 也 很 车 ， 很 累 ， 但 是 家 得 4 成 就 同和 移 环 ， 
是 让 人 容易 加 失 自己 


这 几 年 的 生活 ， 慢 慢 ; 人 村 
让 自己 开心 一 点 * 比如， 如,。 厨 艺 ， 比 如 ， 学 英语 。 生 活 不 容易 
偶尔 也 会 在 膝 夜 痛哭， ed 但 是 ,总 有 两 过 无 清 啊 。 


好 寿光 ,不 如 梦 一 场 。 别 计较 太 多 ，just erjoy right now. 


深 太 而 | 所 各 祭 亲 
EA 



























在 工作 中 ,常用 Dreamweaver 工具 软件 构建 网 站 和 应 用 程序 ,该 工具 提供 可 视 化 布 
局 功能 ,开发 者 能 够 快速 创建 站 点 。 网 站 建设 重要 的 是 要 遵循 网 站 建设 的 基本 流程 ,提高 
网 页 制作 人 员 的 工作 效率 ,保证 网 站 的 科学 性 和 严谨 性 。 


任务 拓展 


创建 一 个 “风景 "网 站 ,在 硬盘 上 创建 站 点 根 文件 夹 ,并 在 其 中 创建 一 个 网 页 文件 
index. html 和 图 像 文 件 夹 img。 
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标签 与 CSS 样式 基础 


HTML 作为 网 页 的 骨架 ,决定 了 有 哪些 元 素 , 那 么 CSS 就 是 网 页 的 血肉 ,决定 了 这 
些 元 素 以 什么 样 的 形式 展现 。HTML 的 作用 就 是 用 来 表示 一 个 网 页 由 哪些 元 素 组 成 ,每 
-个 标签 都 会 在 网 页 中 泻 染 出 对 应 的 元 素 。 因 此 ,网 页 主要 由 3 部 分 组 成 : 结构 
(Structure) ,表现 (Presentation) 和 行为 (Behavior)。 下 面 将 要 学 习 的 HTML 标签 和 
CSS 层 秋 样式 表 就 是 网 页 结构 层 与 表现 层 的 具体 体现 。 
教学 目标 : 
。 掌握 Dreamweaver 中 插入 文字 、 图 像 、 列 表 、 超 链接 等 HTML 元 素 方法 ,以 及 网 
页 各 元 素 标签 的 写法 ,能 够 编写 网 页 结构 层 代码 。 
。 掌握 CSS 样式 表 语 法 规则 。 
。 掌握 CSS 样式 表 中 选择 器 的 使 用 ,能 够 对 网 页 元 素 进行 修饰 。 
。 掌握 在 页 面 中 引入 CSS 样式 表 的 4 种 方式 (内 谋 样 式 \ 行 内 样式 \ 链 接 样 式 和 导入 
样式 ), 能 够 根据 需要 选择 合适 的 方式 将 CSS 样式 引入 网 页 中 。 





任务 21 
HTML 7 
【知识 储备 】 


1. HTML 与 CSS 简介 

HTML 是 Hyper Text Markup Language( 超 文本 标记 语言 ) 的 英文 缩写 ,是 用 于 设 
计 网 页 的 主要 语言 。 用 HTML 编写 的 超 文本 文档 称 为 HTML 文档 ,扩展 名 为 *. html”， 
也 就 是 网 页 。 

CSS(Cascading Style Sheets) 中 文 名 为 “ 层 芭 样式 表 ”, 用 于 设置 网 页 中 各 标签 的 样 
式 。 在 网 页 制作 中 ,HTML 属于 网 页 的 结构 层 部 分 ,用 来 确定 网 页 的 内 容 和 结构 ;CSS 属 
于 网 页 的 表现 层 部 分 ,用 于 设置 网 页 的 样式 。 

2. HTML 的 标签 构成 

HTML 文件 是 由 一 系列 元 素 和 标签 组 成 的 。 元 素 是 HTML 文件 的 重要 组 成 部 分 ， 
元 素 名 不 区 分 大 小 写 。HTML 用 标签 来 规定 元 素 的 属性 和 它 在 文件 中 的 位 置 。 
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HTML 标签 是 由 尖 括 号 括 起 来 的 关键 词 , 绝 大 多 数 HTML 标签 都 是 成 对 出 现 的 , 包 
含 首 标签 和 尾 标签 。 首 标签 的 格式 为 二 标签 名 之 , 尾 标签 的 格式 为 二 /标签 名 之 , 首 标签 
和 尾 标签 的 中 间 为 元 素 内 容 。HTML 标签 格式 如 下 : 


< 标签 名 > 标签 内 容 < /标签 名 > 


成 对 标签 仅 对 包含 在 其 中 的 内 容 起 作用 ,如 标题 标签 二 title 之 和 到 /title 之 用 于 界定 
标题 元 素 的 范围 。 除 成 对 标签 外 ,也 存在 少量 的 单 标签 ,格式 为 二 标签 名 二 ,其 作用 是 在 
相应 位 置 插入 元 素 ,如 换行 标签 二 br 二 表示 在 该 标签 所 在 位 置 插入 一 个 换行 符 。 

在 HTML 文件 中 ,每 个 标签 都 有 名 称 、 可 选择 的 属性 和 标签 内 容 , 标 签 的 属性 都 在 
首 标签 内 标明 。 首 标签 的 基本 语法 格式 如 下 : 

< 标签 名 属性 名 1= "属性 值 1" 属性 名 2= "属性 值 2"..> 

尾 标签 的 基本 语法 格式 如 下 : 

</ 标 签名 > 

在 HTML 文件 中 , 某 个 标签 的 完整 定义 语法 如 下 : 

< 标签 名 属性 名 1= "属性 值 1" 属性 名 2=" 属 性 值 2"..> 标 签 内 容 (文本 或 超 文 本 )< /标签 名 > 

3. 元 素 

当 一 段 文字 被 一 组 HTML 标签 包含 在 中 间 时 , 则 这 段 文字 和 包含 文字 的 HTML 标 
签 一 起 被 称 为 一 个 元 素 。 

在 所 有 HTML 文件 中 ,最 外 层 的 元 素 是 由 二 html 二 标签 建立 的 。 在 二 html 二 标签 所 建 
立 的 元 素 中 ,包含 了 两 个 主要 的 子 元 素 , 这 两 个 子 元 素 是 由 二 head 记 标签 与 二 body 二 标签 所 
建立 的 。 过 head> 标 签 所 建立 的 元 素 的 内 容 为 文件 头 部 ,而 二 body 过 标签 所 建立 的 元 素 
的 内 容 为 文件 主体 。 

4. HTML 标题 水平线、 段落 和 换行 

1) HTML 标题 

标题 的 作用 是 让 用 户 快速 了 解 文档 的 结构 与 大 致 信息 , 它 是 通过 hl 之 一 过 h6 二 等 标 
签 对 进行 定义 的 。 过 hl 之 标签 对 定义 最 大 的 一 号 标题 , 王 h6 之 标签 对 定义 最 小 的 六 号 标题 。 

<hl> 这 是 一 号 标题 < /hl> 

<h2> 这 是 二 号 标题 < /h2> 

<h3> 这 是 三 号 标题 < /h3> 

<h4> 这 是 四 号 标题 < /h4> 

<h5> 这 是 五 号 标题 < /h5> 

<h6> 这 是 六 号 标题 < /h6> 

2) 水 平 线 

水 平 线 主要 是 用 来 分 隔 网 页 中 的 内 容 。 水 平 线 标签 二 hr 字 是 一 个 单 标签 ,其 作用 是 
在 HTML 页 面 中 创建 水 平 线 。 

<p> 这 是 段落 文字 < /p> 

<hr> 
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<p> 这 是 段落 文字 < /p> 
<hr> 


<p> 这 是 段落 文字 < /p> 

3) 段落 

HTML 段落 是 通过 “一 p 之 一 /p>>” 标 签 对 进行 定义 的 。 

4) 换行 

段落 中 内 容 情况 进行 换行 , 需 使 用 二 br 二 标签 。 

<p> 眉 落 中 内 容 <br> 

进行 换行 的 使 用 <br> 

段落 内 容 < /p> 

5. 路 径 

1) 绝对 路 径 

绝对 路 径 用 于 书写 完整 的 路 径 ,系统 按照 整个 路 径 查 找 文件 。 绝 对 路 径 中 的 盘 符 后 
面 用 “:\” 或 “:/” 分 隔 , 各 目录 名 之 间 以 及 目录 名 与 文件 名 之 间 用 “\” 或 “/” 分 隔 。 例 如 ， 
过 img src 二 "http://www. hol23. com/img/flower. jpg"/ 二 表示 为 如 图 像 在 域名 为 
www. hol23. com 的 服务 器 中 的 img 目录 里 ;之 img src 一 "E:/my web/image/flower. 
jpg"/ 二 表示 为 如 图 像 在 EE 盘 My Web 目录 下 的 image 子 目录 里 。 

2) 相对 路 径 

相对 路 径 是 以 当前 文档 所 在 的 路 径 和 子 目 录 为 起 始 目录 ,进行 相对 于 文档 的 查找 。 
制作 网 页 时 通常 采用 相对 路 径 , 这 样 可 以 避免 站 点 中 的 文件 整体 移动 后 ,产生 找 不 到 图 像 
或 其 他 文件 等 的 现象 。 例 如 ,过 img src 一 "image/1. gif" 二 表示 为 如 图 像 位 置 是 当前 目录 
image 文件 夹 里 的 1. gif 图片 。 

6. HTML 超 链接 

1) 超 链接 基本 格式 

超 链 接 由 源 端 点 和 目标 端点 两 部 分 组 成 ,其 中 设置 了 链接 的 一 端 称 为 源 端点 , 跳 转 到 
的 页 面 或 对 象 称 为 目标 端点 , 源 端 点 可 以 是 文字 或 图 像 等 。HTML 超 链 接 主 要 由 标签 对 
“去 a>> 去 /a>” 和 属性 href 构成 。 要 实现 链接 的 跳 转 ,必须 使 用 属性 href。 

HTML 超 链 接 格式 表示 为 二 a href 王 " 跳 转 文件 的 地 址 ”target= "窗口 打开 方式 "全 
源 端点 (如 链接 文字 )</a>。 

href 二 "文件 的 地 址 "表示 目标 文件 的 路 径 。 

target 属性 表示 链接 目标 的 打开 方式 。 

其 中 ,target 有 4 种 类 型 打开 方式 ,分 别 说 明 如 下 : 

。 target 二 "blank" 表 示 保 留 当前 窗口 ,在 新 窗口 中 打开 链接 的 网 页 。 

。 target 二 "_parent" 表 示 在 当前 窗口 打开 链接 的 网 页 。 如 果 是 框架 网 页 , 则 在 父 框 


架 中 显示 打开 的 链接 网 页 。 
"target 一 ” self" 表示 在 当前 窗口 打开 链接 的 网 页 。 如 果 是 框架 网 页 , 则 在 当前 框 
架 中 显示 打开 的 链接 网 页 。 


target 一 ”top" 表 示 在 当前 窗口 打开 链接 的 网 页 。 如 果 是 框架 网 页 , 则 删除 所 有 
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框架 ,显示 打开 的 网 页 。 

2) 超 链接 分 类 

超 链 接 分 为 文字 超 链接 、 图 像 超 链接 、 空 链接 、 锚 点 超 链接 和 邮件 超 链接 几 种 类 型 。 

(1) 文字 超 链接 表示 为 二 a href 二 " 跳 转 文件 的 地 址 "二 链接 文字 二 /a 。 

(2) 图 像 超 链接 表示 为 二 a href 王 " 跳 转 文件 的 地 址 "之 一 img src="1. jpg" 记 二 /a 这。 

(3) 空 链接 表示 为 二 a href=="# "之 过 /a 二 链接 ,实质 是 无 跳 转 页 面 , 仅 在 页 面 上 有 
链接 形式 。 

(4) 锚 点 超 链接 表示 为 二 a href="# 锚 点 名 称 "二 标题 名 二 /a 这 。 

(5) 邮件 超 链 接 表示 为 二 a href= 二 "mailto: 邮 箱 地 址 "二 二 /a 二 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 

实例 素材 位 置 :“ 单 元 2” 目 录 下 的 “文字 . txt”" 和 images 子 目 录 。 

效果 文件 位 置 :“ 单 元 2? 目 录 下 的 flower. html。 


【任务 实施 】 
鲜花 网 页 的 结构 部 分 主要 包括 输入 文本 、 设 置 段落 .设置 标题 .设置 超 链接 、 插 和 人 水平 
线 、 插 和 图像 等 操作 。 

构建 HTML 结构 的 方法 如 下 : 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打 开 “ 文 件 ” 面 板 , 在 复制 的 文件 夹 中 创建 一 个 名 为 
flower. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 添加 标题 。 将 文字 内 容 复制 粘贴 到 新 建文 档 的 设计 视图 中 ,然后 依据 效果 图 , 查 
看 是 否 分 好 段落 ,如果 没有 ,在 设计 视图 中 按 Enter 键 划分 段落 ,并 清除 空 行 。 

(4) 添加 标题 标签 。 在 “插入 ”面板 中 选择 “结构 ”类 别 , 然 后 单 击 “ 标 题 H1” 按 钮 ,页 
面 效 果 如 图 2-1 所 示 。 





(on Te 











当然 要 玫瑰 } 
i 信也 在 想 我 吗 ? 


一 首 诗 ， 在 入 的 上 ， 永远 部 排 不 去 。 








2-1 页 面 效果 
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(5) 添加 水 平 线 。 将 标题 文字 和 内 容 文字 进行 形式 上 的 分 开 。 

(6) 设置 超 链接 。 

(7) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 


【知识 归纳 】 


HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链接 , 超 链接 是 一 个 网 站 的 灵 瑰 。Web 上 
的 网 页 是 相互 连接 的 , 单 击 被 称 为 超 链接 的 文本 或 图 形 就 可 以 链接 到 其 他 页 面 。 


任务 22 修饰 鲜花 网 页 一 -CSS 样式 基础 


【知识 储备 】 
1. 在 HTML 页 面 中 引入 CSS 样式 表 的 方法 
(1) 将 CSS 样式 表 放 置 在 HTML 文件 头 部 的 内 部 样式 表 中 。 
内 部 样式 表 也 称 为 嵌入 式样 式 表 , 是 指 把 对 页 面 各 元 素 的 样式 设置 集中 写 在 “二 head 二 
去 /head> "标签 对 中 ,并 且 用 "二 style> 志 /style> "标签 对 进行 声明 ,其 格式 如 下 : 
<head> 
< Style type= "text/css"> 
<!-- 


选择 器 { 样 式 属性 : 取 值 ;样式 属性 : 取 值 ; …} 
选择 器 {样式 属性 : 取 值 ;样式 属性 : 取 值 ; …} 


be 
</style> 
< /head> 
(2) 将 CSS 样式 表 放 置 在 HTML 文件 主体 一 一 行内 样式 表 。 行内 样式 表 是 直接 对 
HTML 标签 使 用 style 属性 ,然后 将 CSS 代码 作为 属性 值 写 在 其 中 ,其 格式 如 下 : 
<body> 
<HIML 标 签 style= "样式 属性 : 取 值 ;样式 属性 : 取 值 ;.…">< /HTML 标签 > 
< /body> 
(3) 将 CSS 样式 表 放 置 在 HTML 文件 外 部 一 一 链接 样式 表 。 要 在 HTML 中 链接 
外 部 样式 表 文 件 ,需要 在 “二 head 记 二 /head 宇 ”标签 对 之 间 添 加 “二 link 记 过 /link 记 ”标签 
对 ,具体 格式 如 下 : 
<head> 
<link rel= "stylesheet" type= "text/css" href=" 样 式 表 文件 的 地 址 "> 
< /head> 
(4) 将 CSS 样式 表 放 置 在 HTML 文件 外 部 一 一 导入 样式 表 。 要 在 HTML 文件 中 
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导入 样式 表 , 需 要 使 用 * 一 style type 王 "text/css" 二 一 /style 二 ”标签 对 进行 声明 ,并 在 该 
标签 对 中 加 入 “@import url( 外 部 样式 表 文 件 地 址 ) ;” 语 句 , 具 体格 式 如 下 : 


<head> 
<style type= "text/css"> 
@import url (外 部 样式 表 文件 地 址 ); 
</stytle> 
</head> 
其 中 ,import 语句 后 面 的 “;” 是 不 可 省 略 的 。 外 部 样式 表 文件 的 文件 扩展 名 必须 为 
“css”。 外 部 样式 表 地 址 可 以 是 绝对 地 址 ,也 可 以 是 相对 地 址 。 
2. 选择 器 的 类 型 
选择 器 用 来 对 HTML 文件 的 不 同 标签 进行 控制 ,从 而 使 CSS 可 以 对 不 同 的 网 页 元 
素 进 行 修饰 。CSS 的 语法 结构 由 3 部 分 组 成 : 选择 器 名 、 属 性 和 属性 值 。CSS 选择 器 类 
型 分 别 是 标签 选择 器 .类 选择 器 ,id 选择 器 、 伪 类 选择 器 和 通用 选择 器 。 
(1) 标签 选择 器 。 用 法 是 “div {}” ,表示 为 使 同一 标签 的 元 素 拥 有 相同 样式 。 标 签 选 
择 器 特点 是 一 个 HTML 文件 由 很 多 不 同 的 标签 组 成 ,利用 标签 选择 器 可 以 统一 设置 使 
用 某 类 标签 定义 的 元 素 的 外 观 。 例 如 ,根据 效果 要 求 可 以 定义 标签 选择 器 为 


hl{ /* 设置 为 hl 一 级 标题 * / 
text-align:center; /* 设置 文字 内 容 居中 * / 
font- size:42px; /* 设置 文字 为 字号 42 像素 * / 
Color:#FF6600; /* 设置 文字 的 显示 颜色 * / 


} 


(2) 类 选择 器 。 用 法 是 “. class {}”, 表 示 网 页 元 素 拥有 相同 的 样式 。 使 用 类 (class) 
选择 器 可 以 为 相同 或 不 同 的 标签 分 类 设置 不 同 的 样式 。 使 用 该 选择 器 时 ,需要 在 HTML 
中 为 设置 同一 样式 的 标签 定义 相同 的 类 名 , 即 设置 标签 的 类 (class) 属 性 ,然后 在 CSS 中 
定义 类 选择 器 。 定 义 类 选择 器 时 ,需要 在 类 名 称 前 面 加 一 个 点 “. ”, 语 法 结构 是 “. 类 名 { 样 
式 属 性 : 取 值 ;样式 属性 : 取 值 ;…})”"。 例 如 ,根据 效果 要 求 可 以 定义 类 (class) 选 择 器 为 


.cont{ /* 设置 为 cont 类 名 */ 
Color:red; /* 设置 文字 的 显示 颜色 * / 
Font- size:18px /* 设置 文字 为 字号 18 像素 * / 


} 

(3) id 选择 器 。 用 法 是 “#id {})”, 表 示 为 精确 控制 某 个 元 素 的 具体 样式 。id 选择 器 
用 来 对 单个 元 素 设置 单独 的 样式 ,在 同一 HTML 文件 中 ,id 名 不 能 重复 。id 选择 器 的 使 
用 方法 与 类 选择 器 相似 , 先 在 HTML 中 为 希望 单独 设置 样式 的 标签 定义 id 名 (使 用 标签 
的 id 属性 ) ,然后 在 CSS 中 定义 id 选择 器 。 定 义 id 选择 器 时 ,需要 在 id 名 称 前 面 加 一 个 
“ 井 ”, 语 法 结构 如 下 : 

# id 名 {样式 属性 : 取 值 ;样式 属性 : 取 值 ;.……} 


例如 ,根据 效果 要 求 可 以 定义 id 选择 器 为 
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#main{ /* 设 置 为 main 类 名 */ 
width:1408px; /* 设 置 宽度 为 1408 像 素 */ 
height:536px; /* 设置 高 度 为 536 像 素 * / 


} 


(4) 伪 类 选择 器 。 用 法 是 “ :link, :visited, :hover, :active,”。 其 中 ,“.:link” 向 未 被 访 
问 的 链接 添加 样式 ;* ;visited” 向 已 被 访问 的 链接 添加 样式 ;* :hover” 表 示 当 鼠标 光标 悬 
浮 在 元 素 上 方 时 向 元 素 添加 样式 ;* ;active” 向 被 激活 的 元 素 添加 样式 。 伪 类 选择 器 不 属 
于 选择 器 , 它 是 让 元 素 呈 现 动态 效果 的 特殊 属性 。 之 所 以 称 为 “ 伪 ”, 是 因为 它 指定 的 对 象 
在 文档 中 并 不 存在 , 它 指定 的 是 元 素 的 某 种 状态 。 

例如 ,根据 效果 要 求 可 以 定义 伪 类 选择 器 为 


.demo a:link{color:gray;} /* 链接 没有 被 访问 时 前 景色 为 灰色 * / 

.demo a:visited{color:yellow;} /* 链接 被 访问 过 后 前 景色 为 黄色 * / 

.demo a:hover{color:green;} /* 鼠标 光标 悬浮 在 链接 上 时 前 景色 为 绿色 * / 
.demo a:active{color:blue;} /* 鼠标 光标 点 击 来 激活 链接 时 前 景色 为 蓝 色 * / 


(5) 通用 选择 器 。 用 法 是 *”, 表 示 定 义 所 有 网 页 元 素 的 显示 格式 ,匹配 HTML 中 
所 有 标签 元 素 。 通 用 选择 器 是 一 种 特殊 类 型 的 选择 器 ,因为 涉及 范围 较 广 ,一 般 常用 于 清 
除 页 面 中 元 素 的 边 距 。 

例如 ,根据 效果 要 求 可 以 定义 通用 选择 器 为 


间 


margin:07 /# 设置 页 面 外 边 距 为 0 像素 * / 
padding:07 /# 设置 页 面 内 边 距 为 0 像素 * / 
} 
3. 选择 器 的 优先 级 


选择 器 的 优先 级 是 指 当 有 多 个 选择 器 作用 于 同一 HTML 文档 的 同一 元 素 时 , 即 多 
个 选择 器 的 作用 范围 发 生 了 重 县 时 CSS 的 处 理 方式 。CSS 规定 选择 器 的 优先 级 从 高 到 
低 为 行内 样式 表 > id 选择 器 之 类 选择 器 之 标签 选择 器 。 若 在 同一 HTML 文档 中 引入 了 
不 同类 型 的 CSS 样式 文件 , 则 各 CSS 样式 文件 的 选择 器 优先 级 为 行内 样式 表 之 内 和 嵌 样 式 
表 二 链接 样式 表 二 导入 样式 表 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 2” 目 录 下 的 “文字 . txt? 和 images 子 目 录 。 

效果 文件 位 置 :“ 单 元 2 目录 下 的 flower. html。 


【任务 实施 】 


设置 CSS 样式 属性 的 方法 如 下 。 
(1) 页 面 中 引入 CSS 样式 属性 方法 。 在 “一 head 盖 二 /head>” 标 签 对 之 间 输 入 以 下 代码 。 
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<style type= "text/css"> 
Ks 
= 

</style> 











(2) 设置 CSS 样式 属性 。 整 体 页 面 中 文字 、 图 像 元 素 的 代码 如 下 ; 





< style type= "text/css"> 
hi{ 
Color:#F09; 
} 
.one{ 
font- size:24px; 
Color:# FC3; 
font- weight :bolder; 
} 
p{ 
Color:#9C0 ;» 
font- size:18px; 
font- weight :bolder;} 
body { 
background- image: url (image/flower.png) 7 
background- repeat: no- repeat; 
} 
a:link{color:# FC3;} 
</style> 











(3) 保存 文件 。 按 Ctrl 十 S 快捷 键 保 存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 页 面 预览 效果 如 图 2-2 所 示 。 








进 情 ， 雪 然 要 玫瑰 } 
我 旭 你 的 时 候 ， 你 也 在 所 我 吗 ? 
我 们 相 抽 有 放送， 无 论 前 冯 怖 居 。 
醉 说。 县 上 你 是 我 今生 最 大 的 幸福 
过 记忆 的 长 麻 ， 幻 化 成 一 模 晴 得 
情 男 仿 的 评 华 ， 只 为 与 你 奉 : 


得 过 有 情 . 作 星 状 生 二 中 最 美国 的 骨 寺 





遇见 





2-2 页面 预览 效果 
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【知识 归纳 】 


为 避免 浏览 器 的 不 兼容 问题 ,应 尽量 规范 化 选择 器 的 命名 规则 ,包括 一 律 小 写 ;以 字 
母 开 头 ,由 字母 和 数字 组 成 ;尽量 不 加 中 杠 和 下 画 线 ;尽量 用 英文 ;尽量 见 名 知 意 等 。 


任务 拓展 


(1) 举例 说 明 ,如何 将 CSS 引入 HTML 页 面 中 。 例 如 ,是 直接 嵌入 HTML 页 面 中 ， 
还 是 单独 创建 一 个 CSS 样式 表 文件 ,然后 将 其 链接 到 HTML 页 面 中 ,或 者 使 用 其 他 
方式 。 

(2) 如 何 使 用 CSS 控制 页 面 中 的 各 个 标签 ? 例如 ,可 以 使 用 标签 选择 器 对 网 页 中 使 
用 相同 标签 元 素 设置 样式 ;可 以 使 用 类 选择 器 为 网 页 中 定义 了 相同 类 名 称 的 标签 设置 样 
式 ; 可 以 使 用 id 选择 器 为 网 页 中 定义 了 id 名 称 的 标签 单独 设置 样式 。 
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文字 是 网 页 中 不 可 缺少 的 组 成 元 素 , 它 能 将 各 种 信息 有 效 地 传递 给 浏览 者 ,通常 内 容 
丰富 的 网 页 有 大 量 的 文本 。 利 用 CSS 可 以 方便 地 设置 网 页 的 文本 和 段落 效果 ,从 而 更 好 
地 向 浏览 者 展现 网 页 内 容 。 

教学 目标 : 

。 掌握 与 文字 相关 的 HTML 标签 ,能 够 在 网 页 中 插入 标题 段落、 列表 等 元 素 。 

。 掌握 设置 文字 和 段落 样式 的 CSS 代码 ,能 够 使 用 CSS 美化 文字 和 控制 段落 格式 。 

。 掌握 设置 列表 样式 的 CSS 代码 ,能 够 在 网 页 中 插入 列表 并 用 CSS 美化 。 


任务 3-1 企业 产品 介绍 页 面 一 一 
设置 文字 样式 


【知识 储备 】 


1. CSS 文字 样式 常用 属性 

CSS 字体 样式 (Font Style) 是 网 页 中 不 可 或 缺 的 样式 属性 之 一 ,有 了 字体 样式 ,网 页 
才能 变 得 更 加 美观 ,因此 字体 样式 属性 也 就 成 为 设计 者 必须 了 解 的 知识 。 

1) 字体 样式 : font 

语法 如 下 : 

{font:font- stylel font- variant| font- weight| font- sizel font- family} 

font-style 表示 字体 风格 ; font-variant 表示 字体 变形 ; font-weight 表示 字体 粗细 ; 
font-size 表示 字体 大 小 ;font-family 表示 字体 类 型 。 

font 的 作用 是 简写 属性 ,提供 了 对 字体 所 有 属性 进行 设置 的 快捷 方法 。 

2) 字体 类 型 : font-family 

语法 如 下 : 

{font - family: 字 体 1, 字 体 2, 字 体 3, .…} 


font-family 的 作用 是 调用 客户 端 字 体 。 当 调用 客户 端 字体 时 ,指定 多 种 字体 ,可 用 去 
号 *, ”分隔 每 种 字体 的 名 称 。 当 字体 名 称 包含 两 个 以 上 分 开 的 单词 时 ,用 双 引 号 把 该 字体 
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名 称 括 起 来 。 当 样式 规则 外 已 经 有 双 引 号 时 ,用 单 引号 代替 双 引 号 。 

如 果 在 font-family 后 加 上 多 种 字体 的 名 称 ,浏览 器 会 按 字 体 名 称 的 顺序 逐一 在 用 户 
的 计算 机 里 寻找 已 经 安装 的 字体 ,一 旦 遇 到 与 要 求 相 匹配 的 字体 时 ,就 按 这 种 字体 显示 网 
页 内 容 , 并 停止 搜索 ;如 果 不 匹配 就 继续 搜索 ,直到 找到 为 止 ,万 一 样式 表 里 的 所 有 字体 都 
没有 安装 ,浏览 器 就 会 用 自己 默认 的 字体 来 代替 显示 网 页 的 内 容 。 

例如 , {font-family: 黑 体 , 隶 书 ;} 表 示 调 用 客户 端的 字体 类 型 为 黑体 。 如 果 没 有 黑 
体 , 则 调用 客户 端的 字体 类 型 为 隶书 。 

3) 字体 大 小 : font-size 

语法 如 下 : 








{font- size: 数 值 } 


font-size 的 作用 是 设 定 文字 的 大 小 。 

例如 ,{fontrsize:18px;} 表 示 当 前 字体 大 小 为 18 像素 。 
4) 字体 风格 : font-style 

语法 如 下 : 


{font- style:inherit|italic|normal |oblique} 


inherit 表示 字体 继承 ;italic 表示 字体 斜体 ;normal 表示 字体 正常 ;oblique 表示 字体 
偏 斜 体 。 

font-style 的 作用 是 使 文本 显示 为 偏 斜 体 或 斜体 等 ,表示 强调 。 

5) 字体 粗细 : font-weight 

语法 如 下 : 


{font- weight:100- 900|bold|lbolder|lighter|normal;} 


bold 表示 粗 体 (相当 于 数值 700) ;bolder 表示 特 粗 体 ;lighter 表示 细 体 ;normal 表示 
字体 正常 (相当 于 数值 400) 。 

在 字体 应 用 中 , 取 值 范围 为 100 一 900 ,浏览 器 默认 的 字体 粗细 为 400。 另 外 ,可 以 通 
过 参数 lighter 和 bolder 使 得 字体 在 原 有 基础 上 显得 更 细 或 更 粗 些 。 

font-weight 的 作用 是 设 定 文字 的 粗细 。 

6) 字体 颜色 : color 

语法 如 下 : 


{color: 数值 } 


color 的 作用 是 设置 字体 的 颜色 。 
字体 颜色 参数 取 值 范围 中 ,可 以 以 RGB 值 表示 ,也 可 以 以 十 六 进 制 色彩 值 表示 ,或 以 
默认 颜色 的 英文 名 称 表示 。 
字体 颜色 的 设 定 , 以 默认 颜色 的 英文 名 称 表 示 无 疑 是 最 为 方便 的 。 但 由 于 预定 义 的 
颜色 种 类 太 少 ,所 以 更 多 的 网 页 设计 者 喜欢 用 RGB 方式 。RGB 方式 的 好 处 很 多 ,不 但 可 
以 用 数字 的 形式 精确 地 表示 颜色 ,而 且 也 是 很 多 图 像 制 作 软 件 (比如 Photoshop) 默 认 
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使 用 的 规范 ,这 样 一 来 就 为 如 图 片 等 和 网 页 更 好 地 结合 打下 了 坚实 的 基础 。 


7) 字体 行 高 : line-height 
语法 如 下 : 


{line- height: 数 值 |inherit |normal} 


inherit 表示 行 高 继承 父 元 素 的 值 ;normal 表示 行 高 为 默认 值 。 

line-height 的 作用 是 设置 行 与 行 之 间 的 距离 。 

行距 是 指 上 下 两 行 基准 线 之 间 的 垂直 距离 。 如 果 文字 字体 很 大 ,而 行距 相对 较 小 ,可 
能 会 发 生 上 下 两 行文 字 相 互 重 全 的 现象 。 

8) 字 间 距 : letter-spacing 

语法 如 下 : 


{letter- spacing: 数 值 inheritlnormal} 


inherit 表示 字 间 距 继 承 父 元 素 的 值 ;normal 表示 字 间 距 为 默认 值 。 

letter-spacing 的 作用 是 控制 文本 元 素 字母 间 的 间距 ,所 设置 的 距离 适用 于 整个 元 素 。 
9) 单词 间距 : word-spacing 

语法 如 下 : 


{word- spacing: 数 值 inheritlnormal} 


单词 间距 指 的 是 英文 每 个 单词 之 间 的 距离 ,不 包括 中 文 文字 。 间 距 的 取 值 单位 是 
points、em\pixes,in.cm、mm、pc、ex、normal 等 。 

2. 网 页 中 元 素 的 长 度 单位 

CSS 设置 样式 时 ,长 度 单 位 有 相对 类 型 和 绝对 类 型 。 相 对 类 型 包括 px( 像 素 )、%( 百 
分 比 ) .em( 字 符 高 度 ) 。 

px 表示 像素 , 当 使 用 它 作为 文字 或 其 他 网 页 元 素 尺寸 单 位 时 ,屏幕 分 辨 率 越 大 ,相同 
像素 的 网 页 元 素 就 显得 越 小 。 

儿 表 示 百 分 比 ,以 父 元 素 大 小 的 百分比 来 定义 当前 文字 或 其 他 网 页 元 素 的 大 小 。 如 
果 没 有 设 定 父 元 素 大 小 , 则 浏览 器 采用 默认 字体 大 小 的 百分比 。 一 般 情 况 下 ,浏览 器 默认 
的 字体 大 小 为 16px。 

em 表示 字符 高 度 , 以 父 元 素 大 小 的 倍数 来 定义 字体 大 小 。 例 如 , 若 父 元 素 字体 大 小 
为 12px, 则 lem 就 表示 12px; 2em 就 表示 12px * 2 二 24px。 若 没有 设 定 父 元 素 大 小 , 则 
相对 于 浏览 器 默认 字体 大 小 的 倍数 显示 。 

绝对 类 型 包括 in( 英 寸 ) .cm( 厘 米 ) .mm( 毫 米 ) .pt( 点 数 ) 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 

实例 素材 位 置 :“ 单 元 3” 目 录 下 的 “文字 . txt? 和 images 子 目录 。 

效果 文件 位 置 :“ 单 元 3” 目 录 下 的 plc. html。 
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任务 实施 


企业 产品 介绍 页 面 的 具体 制作 ,分 为 构建 HTML 结构 和 设置 CSS 样式 属性 两 部 分 
来 进行 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复 制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打开“ 文件” 面板. 在 复制 的 文件 夹 中 创建 一 个 名 为 plc. 
html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 将 文字 内 容 复 制 并 粘贴 到 新 建文 档 的 设计 视图 中 。 

(4) 添加 文字 标题 。 

(5) 添加 水 平 虚线 。 将 标题 文字 和 内 容 进行 形式 上 的 分 开 。 

水 平 虚线 代码 如 下 : 





<HR style= "COLOR: # 7Tb9ace; BORDER- TOP- STYLE: dotted; BORDER- RIGHT- STYLE: 
dotted; BORDER- LEFT- STYLE: dotted; HEIGHT: lpx; TEXT- ALIGN: center; BORDER- 
BOTTOM- STYLE: dotted" align= left width= "100%"> 











(6) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 如 图 3-1 所 示 为 页 面 预览 效果 。 





PLC 的 优点 


1 八成 本 

利用 电力 线 上 网 ， 人 由 于 
用 现 有 电力 问 谎 可 以 立 现 
少 多 多， 


人 接 入 最 务 。 


2. EE 
A 也 是 论 种 技术 的 
















就 可 以 轻 慑 务 池 到 条 让 进入 
再 4 化 阶 和 ， 和 和 





3 
tm 殿 高 这 传输 ， 人 
速度 要 比 ISDN 的 30 凶 信 , 比 ADSL 


ts 
全 便捷 

不 营 志 宗 时 的 那个 角落 ,只 要 和 找到 房间 内 的 任何 电 尖 括 座 上 ， 就 可 立即 拥 
有 有 PLC 这 天 训话 网 结 训 ! 


于 永远 在 线 
二 不 用 炳 总 的 接 号 讨 程 ， 接 入 电源 宗 等 二 接 入 网 络 ! 





扩展 撞 入 综 口 丈 量 ， 代 站 源 
过 变 压 革 的 技术 ， 





力 综 上 河 线 术 的 撞 广 应 用 ,也 


入 互联 ; 
2 的 昔 风 - 
me Me A 


图 3-1 页 面 预 览 效果 (1) 
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2) 设置 CSS 样式 属性 
(1) 页 面 中 引入 CSS 样式 属性 方法 。 在 “二 head> 二 /head>” 标 签 对 之 间 输 入 以 下 
代码 。 





< style type= "text/css"> 
lss 
-= 


</style> 





(2) 设置 CSS 样式 属性 。 整 体 页 面 中 文字 元 素 代码 如 下 : 





<style type= "text/css"> 

和 

.aa{ 
FONT— WEIGHT: normal; 
FONT- SIZE: 12px; 
COLOR: #003366; 
LINE- HEIGHT: normal; 
FONT- STYLE: normal; 
FONT- FAMILY: "Arial", "Helvetica", "sans- serif"; 

} 

we 
FONT- SIZE: 9pt; 
COLOR: #£fffff; 
LINE- HEIGHT: 15pt; 


.ee { 
FONT- SIZE: 9pt; 
COLOR: #003366; 
LINE- HEIGHT: 15pt; 
} 
.gg { 
line- height: 20px; 
Color: #FF0000; 


border: dashed lpx #000000; 
background- color: #CCCCCC; 
} 
志 二 多 


</style> 











(3) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 页 面 预览 效果 如 图 3-2 所 示 。 
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Ded EE Ee we We em | 
(DDoWwwebwEpm Dp-o 
感 Ptc 的 优点 X 
TEMOS 
天 鼠 网 络 | 
PLC 的 优点 


利用 电力 线 上 网 ， 最 大 的 优点 就 是 成 本 低 。 由 于 利用 电力 线 上 网 ， 直 接 使 用 现 有 电力 网 就 可 以 实现 通 
信 ， 而 不 需要 另外 铺设 电话 线 、 光 电 错 等 ， 大 大 地 咸 少 了 在 基础 网 络 上 的 投资 用 户 能 自由 选择 在 家 中 任 
何 有 电 括 座 的 角落 上 网 ， 无 须 通 过 电话 线 ， 不 用 担心 相对 昂贵 的 电话 费 了 ， 也 不 用 花 钱 铺 设 更 多 电话 线 ， 
从 而 能 够 享受 到 价格 低廉 的 互联 网 按 入 服务 。 


无 所 不 在 的 电力 线 网 络 也 是 这 种 技术 的 优势 。 电 力 线 是 最 基础 3 络 ， 它 的 规模 之 大 ， 是 其 他 任何 网 
铬 无 法 比拟 的 。 因 为 家 家 都 有 电力 线 ， 由 此 ， 运 营 商 就 可 以 轻松 地 把 这 种 网 络 接 入 服务 渗透 到 每 一 个 家 庭 。 
因此 ， 这 一 技术 一 旦 进入 商业 化 阶段 ,将 会 促进 电信 市 场 的 变革 ， 并 给 互联 网 普及 带 来 极 大 的 发 展 空间 


利用 电力 线 上 网 能 够 提供 高 速 传输 。 德国 最 大 的 电力 设备 生产 商 RWE 承 诺 ， 运 用 他 们 的 电力 线 上 网 技 
术 ， 其 速度 要 比 ISDN 拓 虽 上 网 快 30 多 售 , 比 ADSL 更 快 ! 足以 支持 现 有 了 网络 上 的 各 种 应 用 。 更 高 速率 的 PLC 
产品 正在 研制 之 中 。 


不 管 在 家 里 的 哪个 角落 ， 只 要 连接 到 房间 内 的 任何 电源 插座 上 ， 就 可 立即 拥有 PLC 芝 来 的 高 速 网 络 
享受 ! 


PLC 属 于 " 即 括 即 用 "， 不 用 烦 下 的 涛 号 过 程 ， 接 入 电源 就 等 于 接 入 网络 ! | 


通过 PLC 技 术 实现 Intemet 接 入 ， 可 以 灵活 扩展 撞 入 端口 数量 ， 使 资源 保持 较 高 的 利用 率 。 目前 还 未 有 | 
效 解 决 电力 线 信号 通过 交 压 器 的 技术 ， 因 此 ， 电力 线 通信 设备 都 是 集中 在 220V 线 路 变压器 的 用 户 滑 。 一 个 
民用 220V 变 压 器 只 夏 盖 一 定 范围 内 的 用 户 ， 所 以 在 同一 条 电力 线 上 的 资源 不 会 因为 用 户 太 多 而 降低 效率 。 
在 用 户 较 少 的 情况 下 ， 可 以 把 几 个 变压器 线路 区 域内 的 用 户 连 在 一 起 ， 提 高 服务 器 的 利用 率 ! 如 果 用 户 增 
多 , 不 同 变 压 器 区 域内 的 用 户 又 可 分 开 ， 使 用 本 区 域 的 主 服务 器 。 这样 可 使 资源 的 利用 率 始 终 保持 在 较 高 
的 水 准 。 


PLC 技 术 能 3 通过 电力 线 各 个 家 应 的 电 关 与 网 这 为 一体 ， 在 室内 的 设备 之 间 构 这 起 可 自由 交接 
信息 的 局 二 使 人 们 能 入 通过 癌 络 未 控制 自己 守 里 的 电车 设备 。 今 后 ， 随 着 能 上 网 人 9 电视 机 秒 条 等 娄 
字 家 电 的 普及 ,需要 大 由 度 地 增加 按 入 端口， 而 利用 家 底 和 办 公 室 中 已 有 的 万 能 桥接 板 ， 通 过 电力 结 中 高 | 
这 接 入 互联 网 外 能 解 天 这 个 问题 。 从 某 种 意义 上 讲 , 电力 绪 上 网 技术 的 推广 应 用 ， 也 失 动 着 家 应 电器 数字 
人 出 普及 。 | 














胞 100% 





3-2 页 面 预览 效果 (2) 


【知识 归纳 】 


在 设计 网 页 时 ,文字 是 网 页 中 数量 最 多 、 使 用 最 广泛 的 一 种 页 面 元 素 ,必须 高 度 重视 
网 页 中 字体 的 设计 。 灵 活 设计 字体 的 类 型 .样式 ,大 小 和 颜色 ,才能 使 整个 网 页 中 的 字体 
富 于 变化 ,给 人 们 以 美的 享受 。 网 页 字体 设计 设置 技巧 : 四 网 页 中 字体 大 小 不 要 乱 设置 ， 
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最 好 以 系统 默认 为 宜 ; @ 网 页 字体 使 用 一 般 选 择 宋 体 等 比较 常用 的 字体 ; @ 特 殊 字体 或 
艺术 字体 用 图 片 代 蔡 ,以 保证 页 面 效果 。 


任务 3-2 行业 新 闻 文 章 页 面 一 设置 
段落 和 其 他 文字 样式 


【知识 储备 】 


1. CSS 段落 和 其 他 文字 样式 属性 
1) 修饰 文字 : text-decoration 
语法 如 下 : 


{text- decoration: underline|overline|line- through|blink|none;} 


underline 表示 为 文字 添加 下 夯 线 ;overline 表示 为 文字 添加 上 夯 线 ;line-through 表 
示 为 文字 添加 删除 线 ;blink 表示 为 文字 添加 闪烁 效果 (多 数 浏览 器 不 支持 ) ;none 表示 为 
没有 文本 修饰 ,常用 于 取消 超 链接 产生 的 下 画 线 。 

text-decoration 的 作用 是 修饰 文字 ,为 文字 添加 下 画 线 .删除 线 和 上 画 线 等 。 

2) 英文 字母 大 小 写 转 换 : textrtransform 

语法 如 下 : 





{text- transform:capitalize|uppercase|lowercase;} 


capitalize 表示 为 每 个 单词 首 字 母 大 写 ;uppercase 表示 为 所 有 字母 大 写 ;lowercase 表 
示 为 所 有 字母 小 写 。 

text-transform 的 作用 是 转换 英文 字母 的 大 小 写 。 

3) 设置 中 文字 符 间 距 letter-spacing 

语法 如 下 : 


{letter- spacing:normal | 长 度 ;} 


normal 表示 为 正常 六 长 度 " 有 两 种 表示 方法 ,一 种 是 使 用 绝对 数值 ,例如 letter- 
spacing:12px”; 男 一 种 是 使 用 字体 高 的 倍数 ,例如 ,“letter-spacing:2em”。 

letter-spacing 的 作用 是 设置 中 文字 符 间 距 。 

4) 设置 段落 水 平 对 齐 方式 : text-align 

语法 如 下 : 


{ftext- align:left|right |center|justify;} 

left 表示 文本 左 对 齐 ;right 表示 文本 右 对 齐 ;center 表示 文本 居中 对 齐 ;justify 表示 
文本 两 端 对 齐 。 

text-align 的 作用 是 设置 段落 水 平 对 齐 方式 。 
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5) 设置 段落 首 行 缩 进 : text-indent 
语法 如 下 : 


{text-ingent :长度 | 百 分 比 ;} 


“长 度 ” 表 示 设 置 为 当前 字 高 的 倍数;* 百 分 比 ” 表 示 以 父 元 素 的 大 小 来 定义 当前 文字 
的 大 小 ,如 果 没 有 设 定 父 元 素 的 大 小 , 则 采用 浏览 器 默认 字体 大 小 的 百分比 。 

text-indent 的 作用 是 设置 段落 首 行 缩 进 ,例如 ,“text-indent:2em;” 表 示 首 行 缩 进 
2 个 字符 。 

6) 调整 行 高 : line-height 

语法 如 下 : 


{line- height:normal | 数字 | 长 度 | 百 分 比 ;} 


normal 表示 行 与 行 之 间 正 常 ;* 数 字 ” 表 示 使 用 绝对 数值 ,例如 ,“line-height: 8px” 表 
示 行 高 为 8 像素 ;“ 长 度 ” 表 示 设 置 为 当前 字 高 的 倍数 ;百分比 ”表示 以 父 元 素 的 大 小 来 定 
义 当前 文字 大 小 ,如 果 没 有 设 定 父 元 素 的 大 小 , 则 采用 浏览 器 默认 字体 大 小 的 百分比 。 

line-height 的 作用 是 调整 行 高 。 

2. <div 之 标签 和 忆 span 之 标签 的 区 别 及 用 法 

(1) 过 div 之 标签 是 块 级 元 素 , 实 际 上 就 是 一 个 区 域 ,主要 用 于 容纳 其 他 标签 ,如 段落 
二 p 二 .图 像 二 img 二 ,标题 二 h 记 、 表 格 二 table 二 ,以 及 其 他 二 div 二 标签 等 。 默认 的 
display 属性 是 block。 

(2) 二 span 二 标签 是 行内 元 素 , 主 要 用 于 容纳 文字 。 默 认 的 display 属性 是 inline。 
行内 元 素 还 有 以 下 几 个 特点 : 四 设置 宽度 (width) 无 效 ; @ 设 置 高 度 (height) 无 效 , 可 以 
通过 line-height 来 设置 行 高 ; @@ 设 置 margin 只 有 左右 有 效 , 上 下 则 无 效 ; @ 设 置 
padding 只 有 左右 有 效 , 上 下 则 无 效 。 

二 div 志 标签 与 二 span 放 标签 的 区 别 在 于 : 二 div 之 标签 是 一 个 块 级 元 素 ,会 独占 一 
行 ;而 二 span 二 标签 为 行内 元 素 ,在 它 前 后 的 元 素 都 不 会 自动 换行 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 

实例 素材 位 置 :“ 单 元 3” 目 录 下 的 “文字 . txt” 和 images 子 目录 。 

效果 文件 位 置 :“ 单 元 3 目录 下 的 news. html 和 1. html。 


【任务 实施 】 


行业 新 闻 文 章 页 面 的 具体 制作 ,分 为 构建 HTML 结构 和 设置 CSS 样式 属性 两 部 分 
来 进行 。 
1) 构建 HTML 结构 
(1) 将 素材 实例 文件 夹 复 制 至 创建 My Web 站 点 的 根 目 录 中 。 
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(2) 启动 Dreamweaver CS, 打 开 “ 文 件 ” 面 板 , 在 复制 的 文件 夹 中 创建 一 个 名 为 
news. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 将 文字 内 容 复 制 并 粘贴 到 新 建文 档 的 设计 视图 中 。 

(4) 在 表格 内 添加 文字 标题 。 

(5) 在 表格 内 添加 图 片 。 

(6) 保存 文件 。 按 Ctrl 十 S 快捷 键 保 存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 

2) 设置 CSS 样式 属性 

(1) 页 面 中 引入 CSS 样式 的 属性 方法 。 在 “一 head 盖世 /head> ”标签 对 之 间 输 入 以 
下 代码 。 
































< style type= "text/css"> 
< 
--!> 
</style> 
(2) 设置 CSS 样式 属性 ,整体 页 面 中 的 文字 元 素 ,应 用 外 部 样式 表 二 LINK href 一 
"images/style. css" rel==stylesheet ,代码 如 下 : 
TD { 
FONT- SIZE: 12px; COLOR: # 000066; FONT- FAMILY: 宋体 ,arial; 
P.al 
FONT- WEIGHT: 900; FONT- SIZE: 24px; LINE- HEIGHT: 120%; FONT- FAMILY: 楷体 
_GB2312; 
P.a4 
EONT- SIZE: 14px; COLOR: # 000066; LINE- HEIGHT: 180%; text- align: left;text— 
indent :2em; 
P.a5 
FONT- SIZE: 14px; COLOR: #000066; LINE- HEIGHT: 180%; text- align:left7 
} 
(3) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 页 面 预览 效果 如 图 3-3 所 示 。 
【知识 归纳 】 


在 网 页 中 插入 文本 应 用 时 ,文本 大 小 、 字 体格 式 要 对 文本 属性 进行 设置 ,使 文字 风格 
保持 统一 。 文 本 对 齐 方式 主要 应 用 有 4 种 : 左 对 齐 、 居 中 对 齐 、 右 对 齐 和 两 端 对 齐 。 对 网 
页 中 的 段落 进行 排版 布局 时 ,经 常会 用 到 “ 缩 进 文本 ”命令 , 缩 进 页 面 两 侧 的 文本 长 度 , 留 
出 一 定 的 空白 区 域 ,使 页 面 更 美观 。 
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人 V 朋 30 传 *m 达 二、 并 人 Ssens 
由 


中 国 广 播 网 简介 
“向 加 三 破 朵 "fwww'.cnradio.com www.cnr.cnJ 由 中 华人 民 共 和 国 国家 电台 中 央 人 民 广 播 电 台 主 办 ， 具 有 鲜明 
的 广播 特色 ， 是 中 国 最 大 的 音频 广播 网 站 ， 关 在 通过 互联 网 “让 中 国 的 声音 传 向 世界 各 地 " 


“中 国 广播 网 ”的 前 身 是 中 央 人 民 广 播 电 台 了 网站，1998 年 8 月 注册 开通 ， 是 中 央 新 闻 单 位 中 最 早 开通 互联 网 站 
的 单位 之 一 。2002 年 1 月 1 日 ， 正 式 更 名 为 “中 国 广播 网 ”。 


目前 "中 国 广播 网 ” 共 设 有 新 闻 、 财 经 、 体 育 、 调 频 、 书院、 汽车 、 旅游 、 教育、 军事、 民族 等 13 个 专业 
频道 ，400 多 个 栏目 。 网 站 音频 教 据 总 量 800GB。 网 站 同时 以 国际 领先 、 国 内 一 流 的 流 媒 体 音频 广播 技术 ， 为 网 民 
提供 中 央 人 民 广 播 电台 8 喜 节 目 网 上 直播 、270 多 个 重点 栏目 的 在 线 点 播 服务 * 


“中 国 广播 网 ” 正 以 丰富 的 新 闻 信 息 资源 和 音频 节目 资源 为 基础 ， 建 设 一 个 以 中 央 台 为 中 心 、 全 国 各 地 电台 为 
代 托 ， 面向 全 国 、 面 向 全 球 8 中 国 广播 网 ”% 
中 国 广播 网 大 事 记 
中 央 人 民 广 播 电台 网 站 派 记者 赴 上 海 条 访 "上 海 五 国 元 首 会 本 


2001 年 6 月 "上海 五 国 "元 首 峰 会 在 上 海 学 行 。 中 央 人 民 广播 电台 派 特别 报道 组 一 行 十 人 ， 前 往 上 海 采访 报道 ， 
并 对 签字 仪式 和 元 首 会 见 中 外 记者 的 实况 进行 了 现场 直播 * 
中 央 人 民 广播 电台 网 站 参加 “广播 网 站 经 验 交流 会 ” 


2001 年 5 月 31 日 ， 由 湖南 人 民 广播 电台 和 湖南 广播 在 线 (网 站 ) 承办 为 期 5 天 的 “广播 网 站 经 验 交 流 会 "在 长 沙 召 
开 ,， 中央 人 民 广 播 电台 、 中国 国际 广播 电台 和 北京 、 天 津 、 上 海 、 广 东 等 27 家 电台 网 站 负责 人 参加 会 议 * 会 议 主要 转 
线 全 国 广播 网 站 如 何 联合 起来 发 挥 优势 ， 互 利 互惠 ， 资 源 共享 等 议题 进行 了 探讨 * 


中 央 人 民 广播 电 台 网 站 开始 享受 国家 电信 优惠 政策 


2001 年 5 月 29 日 ， 国 务 院 新 闻 办 代表 主要 新 闻 网 站 和 中 国电 信 签 署 协议 ， 中 央 人 民 广播 电台 网 站 开始 享受 国家 电 | 
入 优惠 政策 。 


中 央 人 民 广 播 电 台 成 为 互联 网 协会 常务 理事 单位 
2001 年 5 月 25 日 ， 经 民政 部 批准 ， 中 国 互联 网 协会 在 北京 成 立 。 中 央 人 民 广 播 电 台 被 推举 为 常务 理事 单位 。 
中 央 人 民 广播 电台 网 站 台湾 分 网 开通 


2001 年 5 月 ， 中 央 人 民 广 播 电台 网 站 “你 好 台湾 ”分 网 (httpywww nihaotw com) 开 通 ， 被 列 为 国务 院 台湾 事务 
内 公 室 三 大 重点 涉 台 网 站 。 








中 央 人 民 广 播 电台 版 权 所 有 (C) 京 ICP 备 010162 号 


3-3 页 面 预览 效果 (3) 


任务 拓展 


创建 一 个 “新 闻 ” 站 点 。 在 硬盘 上 创建 站 点 跟 文 件 夹 ,并 在 其 中 创建 一 个 文件 indexl. 
html 和 图 像 文件 夹 img。 搭 建 好 HTML 结构 的 网 页 应 用 CSS 样式 ,插入 标题 和 段落 标 
签 , 再 保存 网 页 。 
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单元 4 艺术 休闲 散文 页 面 一 Axure 交互 
效果 与 图 像 在 网 页 中 的 应 用 


图 像 在 网 页 设计 中 具有 重要 作用 ,可 以 让 网 页 变 得 生动 活泼 ,大 大 提升 浏览 者 查看 网 
页 的 兴趣 。 本 单元 学 习 如 何在 网 页 中 插入 图 像 。 先 用 Axure 进行 页 面 的 原型 设计 ,再 使 
用 CSS 样式 属性 设置 图 像 效果 和 网 页 元 素 。 

教学 目标 : 

。 掌握 用 Axure 设计 页 面 的 方法 ,能 够 真实 还 原 网 页 。 

。 掌握 Axure 链接 行为 制作 交互 效果 的 方法 ,能 了 解 如 何 打 开 链接 和 关闭 窗口 。 

。 掌握 根据 原型 设计 实现 网 页 的 HTML 标签 ,并 在 网 页 中 插入 图 像 。 

。 掌握 修饰 图 像 的 CSS 样式 属性 的 方法 ,能 够 制作 图 文 混 排 页 面 。 


任务 4-1 散文 集 一 一 设置 图 文 混 排 效 果 


【知识 储备 】 


1. 设置 图 像 元 素 的 大 小 

在 CSS 样式 属性 中 ,height( 高 度 ) 和 width( 宽 度 ) 两 个 属性 用 来 设置 图 像 及 块 级 元 
素 类 对 象 的 大 小 。 在 设置 文字 大 小 时 ,常用 的 单位 有 %( 百 分 比 ) 和 px( 像 素 )。 其 中 ,% 
(百分比 ) 是 一 个 相对 单位 ;px( 像 素 ) 作 为 单位 时 ,图 像 的 大 小 将 保持 固定 值 。 

2. 设置 图 像 和 其 他 元 素 的 边框 

在 CSS 样式 属性 中 ,用 于 设置 图 像 和 其 他 元 素 的 边框 的 属性 主要 有 3 个 : 边框 样式 、 
边框 宽度 和 边框 颜色 ,分别 为 border-style、border-width 和 border-color。 

其 中 ,border-style 属性 的 不 同属 性 值 含 义 如 下 : none 表示 无 边框 ;dotted 表示 点 线 ; 
dashed 表示 虚线 ;solid 表示 实 线 ;hidden 表示 隐藏 边框 ,IE 不 支持 ; double 表示 双 直 线 ; 
groove 表示 凹 型 线 ;ridge 表示 同型 线 。 

border 边框 设置 的 样式 : border-top 表示 上 边框 ; border-bottom 表示 下 边框 ; 
border-left 表示 左边 框 ;border-right 表示 右边 框 。4 个 边框 可 分 别 设置 样式 值 、 宽 度 值 、 
颜色 值 , 例 如 , border-top-style、border-top-width border-top-color。 也 可 将 属性 值 用 空 
格 分 开 写 ,例如 ,border:5px double # ff00ff;” 表 示 将 边框 粗细 设置 为 5 像素 并 设置 成 
双 线 、 粉 红色 。 
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3. 设置 图 像 图 文 混 排 
使 用 CSS 样式 属性 为 图 像 等 元 素 设置 左 浮动 或 右 浮动 属性 。 
图 像 在 文字 右边 的 设置 方法 : 


float:right; 
图 像 在 文字 左边 的 设置 方法 : 


float:left; 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 

实例 素材 位 置 :“ 单 元 4” 目 录 下 的 “文字 . txt? 和 images 子 目 录 。 

效果 文件 位 置 :“ 单 元 4” 目 录 下 的 index. html 和 1. html。 


【任务 实施 】 


1. 用 Axure 链接 行为 制作 交互 效果 

用 来 给 元 件 文字 添加 链接 的 功能 ,只 有 在 单 击 文字 时 才 可 以 打开 链接 的 内 容 , 而 单 击 
元 件 其 他 部 分 无 效 。 

可 支持 的 元 件 有 形状 .图 片 文本、 表格 .菜单 。 

方法 1: 在 文本 编辑 的 状态 下 ,选中 全 部 或 部 分 文本 , 单 击 快捷 功能 区 或 者 样式 中 的 
链接 图 标 , 进 入 如 图 4-1 所 示 的 链接 编辑 页 面 。 









































图 4-1 链接 编辑 页 面 


方法 2: 在 文本 编辑 的 状态 下 ,选中 全 部 或 部 分 文本 , 单 击 进入 如 图 4-2 所 示 的 链接 
编辑 控件 交互 和 注释 页 面 。 
如 图 4-3 所 示 为 用 例 编辑 器 页 面 。 
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多 在 当前 窗 口 打开 页 画 1 
要 和 A 
RR Rd 时 
更 多 于 伯 
































9, 
醇 江南 青石 小 巷 县 湖 委员 四 
4-2 链接 编辑 控件 交互 和 注释 页 面 
[EEC 
Case Name [用 2 区 
第 一 步 : 单 主 新 溢 动 作 第 三 步 : 组 织 动作 第 四 步 : 配置 动作 
pr 避 [页 Roz 一 
》 打开 刁 接 | 多 在 当前 窗口 打开 页 面 1 jt 
Si 全 镑 接 到 当前 设计 的 一 个 页 面 
》 在 内 部 往 革 打开 鳃 接 二 
滚动 到 部 件 ( 鲁 点 链接 ) 42D Home 
4 ee Dw! 
”显示 倡 区 D m2 
讼 村 本 Dm 
设置 本 像 
》 设置 于 近 /中 
| 设 查 寺 定 的 列表 项 
》 启用 这 用 
移动 
》》 喷 于 顶层 / 许 屋 
获取 焦点 时 
》 展开 所 要 则 节点 
4 动态 面板 
设置 面板 状态 〇 链接 到 外 部 URL 或 文件 
设 析 而 要 尺寸 
Pe 起 链接 页 面 1.html 
了 〇 重新 bo 葵 当 前 页 面 ( 对 变量 的 修改 桂 起 作用 ) 
4 杂项 ” © 返回 前 一 页 ( 对 变量 的 收 改 棕 不 起 作用 ) | 
Cm ww 











图 4-3 用 例 编辑 器 页 面 


如 图 4-4 所 示 为 页 面 预览 效果 。 单 击 “ 西 湖 美景 "链接 ,会 显示 如 图 4-5 所 示 的 文字 
页 面 。 

2. 根据 原型 设计 ,使 用 Dreamweaver CS 制作 网 页 

开始 制作 如 图 4-4 所 示 的 页 面 预览 效果 。 由 效果 图 可 以 看 出 ,网 页 中 插入 了 图 像 文 
字 。 具 体制 作 时 ,分 为 构建 HTML 结构 和 设置 CSS 样式 属性 两 部 分 来 进行 。 
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二 加 [Elel x 
D Home x ee 


所 3 CQ homehtml 要 


























湖 美景 之 中 ， 本 盛夏 、 
色 ， 美丽 的 不 和 风华 流沙 ， 千 秋 几 
叹 ， 惟 生活 中 一 处 平凡 却 站 闪 发 光 的 碧玉 小 景 。 











4-5 文字 页 面 


1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打 开 “ 文 件 ” 面 板 , 在 复制 的 文件 夹 中 创建 一 个 名 为 
index. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 添加 标题 。 将 文字 内 容 复 制 并 粘贴 到 新 建文 档 的 设计 视图 中 ,然后 依据 效果 图 ， 
查看 是 否 分 好 段落 。 如 果 没 有 ,在 设计 视图 中 按 Enter 键 划 分 段落 ,并 清除 空 行 。 

(4) 插入 图 像 。 单 击 * 插 入 ?面板 “常用 ?类 别 中 的 “图 像 ?按钮 ,在 弹出 的 对 话 框 中 选 
择 素 材 中 的 01. jpg 图 像 插 入 .如 图 4-6 所 示 。 

(5) 从 效果 图 中 可 知 ,文字 及 图 像 整体 在 页 面 中 有 一 定 的 宽度 并 需要 居中 显示 。 为 
此 ,在 设计 视图 时 应 使 用 CSS 样式 属性 控制 元 素 的 宽度 、 高 度 等 。 
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醇 江 南 青石 小 埠 西湖 美景 








和 EE So TH R72 种 WGH OP- 


4-6 图 像 页 面 


2) 设置 CSS 样式 属性 
(1) 本 例 使 用 内 骨 式 ,在 “于 head 二 一 /head> ”标签 对 之 间 搬 入 代码 。 





<style type= "text/css"> 
<!-- 
--!> 

</style> 





(2) 设置 文字 ,链接 标签 的 代码 如 下 : 





p{ 
font- size:22px; /* 设置 文字 为 字号 22 像素 * / 
font- weight:bold; /* 设置 文字 加 租 * / 
color:#03c; /* 设置 文字 的 显示 颜色 * / 
text- align:center;} /* 设置 文字 为 居中 显示 * / 

af 
text- decoration:noney /* 设置 文字 为 无 下 画 线 显示 * / 
padding- left:50px; /* 设置 内 左边 距 为 50 像素 * / 

} 

a:hover{ 
padding- left:50px; /* 设置 链接 文字 内 左边 距 为 50 像素 * / 
color:#F93; /* 设 置 单 击 链接 时 文字 的 颜色 * / 


} 











(3) 设置 文字 链接 。 将 “ 醉 江 南 ”“ 青 石 小 意 " 文 字 设 置 为 “#”( 空 链接 )。“ 西 湖 美景 ” 
文字 设置 为 1. html 链接 ,能 实现 页 面 跳 转 。 如 图 4-7 所 示 为 设置 文字 链接 的 页 面 ,其 中 
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代码 如 下 : 





<a href= " 虽 "> 醉 江南 </a> 
<a href- 嘎 "> 青 石 小 埠 < /a> 
<a href="1.html"> 西 湖 美景 < /a> 





(4) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 
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图 4-7 设置 文字 链接 的 页 面 


【知识 归纳 】 

网 页 中 的 文本 是 传递 信息 的 主要 途径 ,对 文本 进行 良好 的 控制 和 美化 ,是 决定 网 页 是 
和 否 美观 和 风格 一 致 的 关键 。 图 像 又 是 吸引 访问 者 不 可 或 缺 的 基本 要 素 。 使 用 CSS 规则 
控制 页 面 中 的 文本 和 图 像 ,使 页 面 呈 现 出 多 样 的 外 观 ,也 是 吸引 访问 者 的 关键 。 


任务 4-2 童话 故事 一 一 设置 网 页 背景 元 素 


【知识 储备 】 
1. 设置 背景 颜色 
设置 背景 颜色 是 指使 用 CSS 样式 属性 设置 页 面 或 指定 的 块 级 元 素 背景 颜色 ,属性 为 
background-color。 颜 色 设 置 方法 可 采用 十 六 进 制 的 RGB 值 、. 颜 色 的 英文 名 称 、 颜 色 的 
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RGB 分 量 值 或 RGB 值 的 百分比 等 表示 ,例如 ,CSS 样式 属性 中 分 别 表示 如 下 。 

。 十 六 进 制 数 表示 : body{background-color: #21439c)。 

。 颜色 的 英文 名 称 表 示 : body{background-color:red)。 

。 颜色 分 量 值 表示 : body{background-color: rgb(100,100,100))。 

。 颜色 值 百分比 设 定 表示 : body{background-color:rgb(10% ,10% ,50%)})。 

2. 设置 背景 图 像 

设置 背景 图 像 是 指使 用 CSS 样式 属性 为 整个 页 面 或 指定 的 HTML 元 素 设 置 ,使 用 
CSS 样式 属性 可 控制 背景 图 像 的 位 置 。 
设置 背景 图 像 : background-image 属性 (网 页 中 图 像 的 格式 一 般 为 GIF JPG 或 PNG)。 
设置 背景 图 像 的 重复 方式 : background-repeat 属性 (x 表示 水 平 ;y 表示 垂直 ;no- 
repeat 表示 不 平 铺 ) 。 
设置 背景 图 像 的 位 置 : background-position 属性 (从 元 素 位 置 重复 ) 。 
固定 背景 图 像 : background-attachment 属性 (scroll 表示 滚动 ;fixed 表示 背景 图 
不 动 ;inherit 表示 继承 父 元 素 的 设置 ) 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 

实例 素材 位 置 :“ 单 元 4” 目 录 下 的 “文字 . txt” 和 images 子 目录 。 

效果 文件 位 置 :“ 单 元 4” 目录 下 的 two. html。 


【任务 实施 】 

在 HTML 中 实现 的 背景 图 像 ,CSS 样式 属性 可 在 网 页 中 应 用 灵活 控制 。 具 体制 作 
时 ,分 为 构建 HTML 结构 和 设置 CSS 样式 属性 两 部 分 来 进行 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打 开 “ 文 件 ” 面 板 , 在 复制 的 文件 夹 中 创建 一 个 名 为 
index. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 添加 标题 。 将 文字 内 容 复 制 并 粘贴 到 新 建文 档 的 设计 视图 中 ,然后 依据 效果 图 ， 
查看 是 否 已 经 分 好 段落 。 如 果 没 有 .在 设计 视图 中 按 Enter 键 划分 段落 ,并 清除 空 行 。 

(4) 插入 图 像 。 单 击 “ 插 入 ”面板 “常用 "类别 中 的 “图 像 * 按 钮 ,在 弹出 的 对 话 框 中 选 
择 素 材 中 的 03. jpg 图 像 插 入 ,如 图 4-8 所 示 为 插入 图 像 后 的 页 面 。 

(5) 从 效果 图 中 可 知 ,文字 及 图 像 整体 在 页 面 中 有 一 定 的 宽度 并 需要 居中 显示 。 为 
此 ,在 设计 视图 时 应 使 用 CSS 样式 属性 控制 元 素 的 宽度 ,高度 等 。 

2) 设置 CSS 样式 属性 

(1) 页 面 中 引入 CSS 样式 的 属性 方法 。 在 “一 head 之 /head> ”标签 对 之 间 输 入 以 
下 代码 。 
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ldectype htmly 
crnl> 

neaay 

mera charaet=rccE-Ery 

<rirle> 重 二 站 事 </cirley 


ESewaomewnn 





五 SAE AT 终于 成 了 一 个 人 
见 人 避 昌 美 少 女 。 日 守 公 于 丰富 委 民 、 有 当心 ， 候 经 冥 ;和 一 起 革 要 
“基本 物 , 信 小 外、 小 了、 术 民 、 小 部 于 白雪 公主 医 为 白 


白雪 公主 过 若 幸 奏 央 秆 季 生 徊 。</p> 
<p align="lefc"> 自 要 公主 在 凌 订 里 鸡 了 一 天 ， 和 村 非 党 订 管 , 就 在 屠 
如 的 床上 畏 了 下 来， 下 知 下 营地 地震 了 。 白 要 公主 每 天 都 招 这 
个 小 木 匡 打 扫 生 非常 毒 吉 。 七 个 小 培 人 从 检 林 里 台 未 后, 总 有 可 口 Bj 
各 等 茜 他 们 。 名 这 样 日 塌 一 日 ， BE 和 小 矮人 这 苦闷 的 生 舌 。 </p> 
lign="lefc"> 地 心 忆 的 王后 类 P1 了 一 个 办 法 ,好 在 羡 yt 
， 闵 上 了 好 词 弛 所 村 药 ; .去 元 各 公主 ， 








EE 


江 去 毒 死 白雪 
| 死去 ,到 对 个 a 和 后 王后 就 打 秩 成 老 太 





图 4-8 插入 图 像 后 的 页 面 





要 临 一 口 这 个 有 毒 的 革 秆 ， 就 一 证 会 于 去 。 到 BB 个 时 人 ， a | ， 

最 美的 女人 了 。krdqooy 然后， 王后 沽 打扮 或 志 太 和 的 异 忻 ， 二 者 一 \ 必 都 喜欢 白 轨 公主 ， 和 \ 主 会 给 它 人 
RE 和 
2 oes et A 
3 wor 。 自 雪 全 王 委 天 都 把 这 个 小 木 必 打 党 得 非常 
图 于， 六 及 和 他 让 " 愉 和 | 


雪 公 主 会 给 它 们 食 御 旋 ， 和 会 韩 由 事 结 它们 时， 个 性 营 良 狼 如 天 合生 的 远 的 一 个 国度 里 ， 住 着 一 个 国王 和 王后 ， be es 





渍 心肠 的 王后 想到 了 一 个 办 法 ， 的 外面， 注 上 了 她 油 配 的 毒药 抽 
旭 ! 嘿 | 白雪 个 有 素 的 苹果 ， 就 





< style type= "text/css"> 
<!-- 
--!> 

</style> 





二 div 志 元素 样 式 的 代码 。 如 图 4-9 所 示 为 文字 、 图 像 元 素 代码 对 应 的 页 面 。 


(2) 设置 CSS 样式 属性 。 整 体 页 面 中 文字 、 图 像 元 素 的 代码 ,设置 id 为 content 的 





< style type= "text/css"> 


background- position:right bottom; /* 设置 背景 图 像 所 在 位 置 为 右 下 角 * / 
background- color:#E9FBFF; padding:10pxy /x 设置 块 级 元 素 的 背景 颜色 * / 
border: 6px double # FF0033; /x 为 块 级 元 素 设置 边框 * / 





body{ 
padding- top:30px; /x* 将 页 面 顶端 与 <div> 块 级 元 素 的 距离 设 为 30px* / 
background image: url (images/b2.png) ， /* 设置 背景 图 像 并 重复 铺 满 整个 页 面 * / 
font- size:14px; /* 统一 设置 页 面 文字 的 大 小 * / 
Color:# 660033; /* 统一 设置 页 面 文字 的 颜色 * / 

} 

#content{ 
width:80%; /* 设置 块 级 元 素 的 宽度 为 页 面 宽度 的 80%x / 
margin:0px auto; /* 设置 块 级 元 素 在 页 面 中 水 平 居中 * / 
background- image: url (images/4.png); /* 为 块 级 元 素 设置 背景 图 像 * / 
background- repeat:no- repeat; /* 设置 背景 图 像 不 重复 * / 
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#content img{ 
float:left; /* 设 置 文字 环绕 图 像 的 效果 ,图 像 位 于 文字 的 左边 * / 
margin- right:10px; /* 设置 图 像 右 侧 距 文字 的 距离 为 10pxx* / 
} 
p{ 
text- indent :2em; /* 段落 首 行 缩 进 2 个 字符 * / 
line- height :2em;} /* 将 行 高 设 为 2 个 字符 的 高 度 * / 
hl,h5f{ 
text- align:center; /* 设置 标题 文字 居中 * / 
} 
</style> 
RIgoctype henl> 
aam> 
aeaa> 
[cnera charset="utr-e"> 
<ricle) 重 放 雪 事 </title> 
catyle type="rext/cas"> 
earr 


padding-rop:30pxr 
background-image: url(images/b2.png)7 
font-size: 14px 
color:#5600337 

1 


Heontent{ widch:E0%; 
margin:0px auro; 
backgreund-imag: 
background-repe: Tepear; 
background-position: rigkt bottom; 
backgreund-eolor: 和 98BFF。 padding:10pe; 
border:6px double #E800337 

hcontent, imgt :left; rargin-right:10px;} 

pl text-indent line-beight:2em:} 

hlins( rexr-al enter;) 






Url (inages/4.png) 


















[c/style> 
(</head> 
[<body> 
[<div ide"content"> 

<h1> 自 雷公 主 </hl> 

<h5> 作者 : 安 注 生 c/h5> 

<img src="images/3.png" widch="132" height="204" alt=""> 

<p aligrn="left"> 在 通 远 的 一 个 国 革 里 ， 住 着 一 个 国王 和 王后 ， 他 六 望 有 一 个 孩子 。 于 是 很 减 总 也 向 上 各 祈祷 。 ldquo; 上 帝 哺 ! 我 们 都 是 好 国王 好 王后 ， 请 您 网 给 我 们 一 个 孩子 中! 
jerdquo; 不 欠 以 后 ， 王 后尘 然 生 下 了 一 个 可 自 的 小 公主 ， 这 个 女孩 的 皮肤 白 得 像 雪 一 舱 ， 双 直 红 得 有 如 革 果 ， 关 发 乌黑 对 烦 ， 因 此 ,国王 和 王后 就 把 抽取 名 为 &1dquo; 白 轩 公 主 &rdquo;> 

全 国 的 人 民 邮 为 白雪 公主 容 认 祝福 。 <// 

|<p> 白 雪 公主 在 国王 和 王后 9 况 爱 之 之 下 这 新 长 大 了 ， 终于 成 了 一 个 人 风 人 重 的 美 少 女 。 白雪 公主 非常 蔷 良 、 有 爱心 ， 好 经 常 和 动物 一 起 玩 灰 。 pe 像 小 康 、 小 
| 兔子、 格 饼 、 小 乌 才 喜欢 白雪 公主 ， 因 为 白雪 公主 会 纺 它 们 食物 吃 ， 还 会 讲 故事 给 它们 听 。 个 性 著 良 犹如 天 使 般 的 白 丰 公主 过 痢 幸 得 快乐 的 生活 。<， 
|<p align="lefc"> 白 雪 公 主 在 森林 里 网 了 一 天 ， 党 得 非常 冶 修 ,就 在 那 七 瀛 小 小 的 未 上 精 了 下 来 ， 不知 不 觉 地 接着 - 公 : 二 每 元 3 这 直人 是 打扫 介 间 党 青 省 。 
| 七 个 小 殷 人 从 鞭 林 里 回来 后 ， 就 有 可 口 即 晚 区 等 看 他 们 。 就 这 样 日 夏 一 日 ， 白 守 公 主 相 小 向 人 过 看 局 乐 的 生活 。 </p> 
|<p align=”lefc"> 坏 心 所 的 王后 想到 了 一 个 办 法 ， 闻 在 鲜红 的 苹果 外 面 ， 涂 上 了 她 则 本 的 毒药 ， 准 备 去 毒 死 白雪 公主 。 6ldquo; 嘿 ! 嘿 ! 白 委 公主 只 要 吃 一 口 这 个 有 毒 的 苹果 ， 就 一 定 
会 死 去。 到 玫 个 时 候 ， 我 就 是 世界 上 最 美丽 的 女人 了 *&rdquo; 。 然后， 王后 就 打 换 成 老 太 半 9 模样 ， 提 着 一 答 芋 曲 开关 林 里 去 了 。 </p> 





vatv> 
kboayr 
varm> 








图 4-9 文字 、 图 像 元 素 代 码 对 应 的 页 面 


(3) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 ,页 面 预览 效果 如 图 4-10 所 示 。 


【知识 归纳 

通过 学 习 ,掌握 CSS 样式 属性 代码 中 关于 图 像 和 文字 相关 的 样式 属性 ,了 解 插入 图 
像 与 设置 图 像 的 区 别 : 一 个 是 HTML 结构 层 内 容 ; 另 一 个 是 CSS 样式 属性 修饰 内 容 。 
在 使 用 CSS 样式 属性 设置 图 像样 式 时 ,重点 掌握 图 像 边框 和 大 小 的 设置 方法 。HTML 
大 部 分 元 素 属性 也 适用 于 此 方法 。 
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1 


| 在 的 -个 国 & 里 ， 生 着 一 个 和 王 所 ,总 们 二 有 一 个 了 .于 下 信 流 地 站 六 白 尘 。 “上 奇遇 1 我们 地 好 几 王 好 二 项， 请 全 
珠玉 了 到 | ”不 以 后 ， 王 后 果 拓 和 这 个 雪 了 的 语 用 白 过 公 现 ， 观 拓 红 条 有 加 有 ， 世 和 包 中 未 顺 ， 国 
此 ,国王 和 王后 这 把 由 职 和 为“ 白 写 公 主 ”。 全 居多 人 民 直 为 丘 到 人 王 二 可 和。 






后 人 二 认同 王 和 王后 的 家 有 之 下 过 和 | 大 了 ， 堵 于 成 了 一个 人 见 人 委 第 关 廊 。 村 至 人 王 非 苦 页 、 有 很 ， 好 经 和 和 一起 天。 
人 小 大 ， 小 扣子， 关节 ， 小 委 才 太 允 白 二 公主 ， 因 为 怕 公主 人手 避 们 窜 物 号 ， 二 会 计 扩 时 人 f ss = 
全 王 这 村 福 可 和 入 生活 





上 本 全 于 网 了 一 天 ， 砚 何 和 从 许 亿 ， 旋 在 于 七 策 7 下 未 ，TR#TT 抽 地 有 各 了 ， 特 公 芋 和 天 部: 
半生 | 车。 七 Th 拓 人 人才 于 加 下 后 部 有 可口 8 和 生 下 他 们 。 寺 这 日生 日 ， 折 至 公主 和 让 人 过 百 性 大 





十 条 的 王后 介 弄 了 一 个 办 法 ， 引 在 时 红 的 音素 外 坦 ， 泳 上 了 给 六 雪 的 ， 准 名 去 二 殉 扣 要 公主 。， 
去 到 导 人 全， 我 证 世界 上 最 美玉 人 了 。” 角 后 ， 王 站 这 打折 了 老大 美的 模 笠 ， 失 省 共 革 采 到 玲 放 和 




































图 4-10 页 面 预览 效果 (2) 


任务 拓展 


制作 图 4-11 所 示 网 页 ,素材 位 置 参 照 本 单元 中 的 文件 夹 。 





吉祥 物 

生生 人 形象 是 运动 时 尚 的 五 只 羊 ， 分 别 了 名 " 阿 祥 ”“ 阿 和 ” “ 阿 如 ” 3 
外 ， 囊 达 了 广州 下 二 会 稳 给 亚 州 人 民 带 来 “吉祥 、 和 前、 幸福 、 图 前 
lid i 激情 ” * 和 2008 年 北京 奥运 会 一 样 ， ew 

硫 了 亚运 会 吉祥 物 的 个 炒 之 二 


广州 亚运 会 吉祥 物 的 | 意 来 源 于 五 位 仙人 分 别 计 着 五 只 口 衔 稳重 的 仙 羊 降临 广州 折 9 传说 。 千年 前 的 “五 症 术 谷 ” 传 
说 使 时 “五 羊 ”成 为 广州 城市 最 为 知名 的 一 个 标识 。 羊 与 中 华 民族 传统 文化 的 帮 怕 有 着 军 阳 的 历史 济源， 






乐 羊 羊 
Le Yangyonq 
, 礼 仅 ,美学 等 二 文化 的 产生 和 必 展 也 有 重要 4 向。 如 中 国 古 人 文字 中 “ 秆 "” 通 “ 祥 ”， 


中 国 传统 的 美学 观念 是 “ 羊 大 ”为 “ 美 ”。 在 正六 许多 国家 的 传统 文化 中 Rs 
吉祥 之 物 ， 能 给 人 带 来 幸运 。 广 州 下 运 会 吉祥 攀 职 “ 羊 ” 的 创意 ， 将 为 焉 州 不 同文 化 、 不 同 示 教 的 人 们 所 接受 和 喜爱 


吉祥 获 解 读 

“ 阿 祥 " 是 一 忆 英 便 车 西 、 真诚 二 的 小 羊 ， 着 色 为 奥林匹克 五 环 中 的 基色 ， 象 征 绵延 这 消 的 条 工 ， 代 表 广 州 人 平 
和 这 切 的 性 格 、 宽 广 包 容 的 购 怀 = 

“* 阿 和 ”是 一 只 间 实 谦 示 、 沉 着 坚定 的 小 羊 ， 着 色 为 奥林匹克 五 环 中 的 黑色 ， 象 征 内 责 文 化 的 源远流长 和 千年 古城 
深厚 的 历史 文化 积淀 * 

“ 阿 如 ”是 一 只 美丽 时 尚 、 联 颖 热情 的 小 羊 ， 着 色 为 奥林匹克 五 环 中 的 红色 ， 象 证 广州 从 市 花木 棉花 * 


大 人 疾 涛 开朗 的 小 羊 ， 着 色 为 奥林匹克 五 环 中 的 绿色 ， 充 消 朝 气 的 绿色 赋予 它 泉 锡 灵动 的 气 
i 云 山 。 


“ 乐 羊 羊 ”是 一 只 高 大 籼 气 、 阳 光 自信 的 大 羊 ， 看 入 为 册 亲 史 训 下 中 的 贡 色 ， 象征 主办 城市 “种 城 ” ( 秘 逢 新 
色 )， 有 丰收 、 喜 悦 之 意 ,表达 玫 运 会 的 成 功 举办 将 是 于 州 人 民主 中 的 精神 财富 
吉祥 功 发 布 


2008 年 4 月 26 日 ， 第 16 届 亚运 会 组 委 会 在 广州 白 去 国际 会展 中 心 学 行 隆重 的 吉祥 析 发 布 仪式 。 吉 祥 物 乐 羊 羊 的 证 生 ， 
是 广 ; 外 L 拓 入 备 工作 中 义 一 里 程 流 意义 的 大 事 ， 它 将 对 传播 广州 亚运 会 的 形象 ， 推 动 开 运 会 各 项 筹备 工作 ， 产生 入 








图 4-11 网 页 预览 效果 
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随 着 CSS 的 发 展 ,表格 的 用 途 回归 到 存放 各 类 数据 信息 中 ,将 复杂 的 元 素 信息 有 条 
理 地 分 布 到 网 页 各 个 位 置 , 当 把 表格 的 宽度 定位 固定 像素 值 后 ,还 能 保证 网 页 布局 不 会 随 
浏览 器 窗口 的 大 小 变化 而 变化 , 当 在 表格 输入 文字 时 ,可 以 让 文字 满 格 后 自动 换行 ,方便 
对 文字 的 编辑 。 

教学 目标 : 

。 掌握 使 用 表格 布局 网 页 的 方法 。 

。 灵活 掌握 调整 表格 的 方法 。 

。 能 够 合理 利用 表格 对 网 页 进行 布局 和 规划 。 


任务 5-1 月 历 制 作 一 一 表格 标签 的 灵活 应 用 


【知识 储备 】 


1. 表格 的 HTML 标签 

与 其 他 HTML 元 素 一 样 ,表格 也 是 由 标签 组 成 的 。 

1) 表格 主体 标签 二 table 二 

“< 一 table> 志 /table> ”标签 对 为 表格 的 主体 标签 ,表格 的 其 他 组 成 元 素 , 如 行 标 签 、 
单元 格 标签 等 都 包含 在 “一 table 之 一 /table 之 ”标签 对 之 间 。 

2) 行 标签 之 tr 二 

“<tr></tr 二 ”标签 对 为 表格 的 行 标签 ,表格 有 多 少 行 ,就 有 多 少 个 “tr 二 
去 /tr> ”标签 对 。 在 每 行 中 可 以 包含 多 个 单元 格 。 

3) 单元 格 标签 二 td> 

“过 td 记过 /td 二 ”标签 对 为 表格 的 单元 格 标签 ,其 包含 在 “二 tr 二 二 /tr 二 ”标签 对 中 。 
单元 格 用 于 存放 表格 要 显示 的 内 容 , 可 以 是 任意 的 HTML 内 容 , 这 些 内 容 位 于 “二 td 二 
去 /td> ”标签 对 之 间 。 在 表格 的 一 行 中 可 以 包含 多 个 单元 格 。 

4) 表 头 标签 二 th 二 

“< 一 th> 志 /th>” 标 签 对 为 表格 特有 的 表示 表 头 单元 格 的 标签 ,在 Dreamweaver 的 
设计 界面 中 创建 表格 时 可 以 选择 表 头 所 在 的 位 置 。scope 为 二 th 二 标签 的 属性 ,表示 定义 
表 头 。col 为 属性 值 ,表示 将 当前 列 的 所 有 单元 格 和 表 头 单元 格 联系 起 来 。 
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5) 标题 标签 二 caption 二 

“一 caption 二 二 /caption 二 ”标签 对 为 table 表格 特有 的 表示 标题 的 标签 ,同志 th 之 标 
签 不 同 的 是 ,过 caption 过 标签 不 需要 合并 , 它 本 身 就 只 有 一 列 ,同时 过 caption 之 标签 的 位 
置 默认 是 居中 的 。 

2. 合并 和 拆 分 单元 格 

要 合并 单元 格 , 可 先 选中 要 合并 的 多 个 单元 格 , 然 后 单 击 属性 检查 器 中 的 “合并 单元 
格 ? 按 钮 ;要 拆 分 单元 格 , 可 将 插入 点 置 于 要 拆 分 的 单元 格 中 ,然后 单 击 属性 检查 器 中 的 
“ 拆 分 单元 格 "按钮 ,在 弹出 的 对 话 框 中 选择 需要 拆 分 为 的 单元 格 类 型 ,并 输入 要 拆 分 为 的 
行 数 和 列 数 ,然后 单 击 “ 确 定 ? 按 钮 即 可 。 

在 Dreamweaver 的 设计 界面 中 ,在 要 选择 的 单元 格 上 拖 动 鼠标 可 选中 相应 的 单元 
格 ; 按 住 Ctrl 键 依次 单 击 要 选择 的 单元 格 ,也 可 同时 选中 多 个 单元 格 ; 单 击 网 页 文档 底部 
状态 栏 中 的 相应 标签 ,可 选中 整 张 表格 ,或 选中 插入 点 所 在 的 行 或 单元 格 ,如 图 5-1 所 示 
为 表格 属性 。 
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图 5-1 表格 属性 


3. 使 用 CSS 设置 表格 或 单元 格 的 颜色 

使 用 CSS 设置 单元 格 内 文字 的 颜色 ,以 及 表格 或 单元 格 背景 的 方法 与 设置 文字 颜色 
和 网 页 元 素 背 景 的 方法 相同 。 例 如 ,可 以 使 用 color 属性 设置 单元 格 内 文字 的 颜色 ;可 以 
使 用 background-color 属性 设置 单元 格 、 行 或 表格 背景 的 颜色 ;可 以 使 用 background- 
image 属性 设置 表格 , 行 或 单元 格 背 景 图 像 。 

4. 使 用 CSS 设置 表格 或 单元 格 大 小 和 边框 

使 用 CSS 设置 表格 或 单元 格 大 小 和 边框 等 的 方法 ,与 设置 图 像 和 其 他 块 级 元 素 的 方 
法 相同 。 例 如 ,可 以 使 用 width 属性 设置 整 张 表格 或 单元 格 宽度 ;可 以 使 用 height 属性 
设置 整 张 表格 或 行 的 高 度 ;可 以 使 用 border 属性 设置 表格 或 单元 格 的 边框 。 例 如 ,代码 
table {border:1px solid red;) ,表示 设置 整 张 表格 的 边框 粗细 为 1 像素 、 实 线 、 红 色 。 

如 果 使 用 CSS 只 设置 了 表格 二 table 之 标签 的 边框 , 则 设置 的 是 整 张 表 格 的 外 边框 ， 
此 时 各 单元 格 并 不 会 受到 影响 ,因此 还 需要 单独 为 单元 格 设置 相应 的 边框 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 

实例 素材 位 置 :“ 单 元 5 目录 下 的 “文字 . txt” 和 images 子 目 录 。 

效果 文件 位 置 :“ 单 元 5” 目 录 下 的 yueli. html。 
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【任务 实施 】 


要 制作 一 个 表格 形式 的 月 历 (以 2017 年 7 月 为 例 )。 此 月 历 的 显示 效果 为 ,6 月 及 
8 月 的 部 分 日 期 背景 颜色 为 灰色 ,而 7 月 的 日 期 背景 颜色 有 页 面 背 景 图 片 衬托 ; 当 将 鼠标 
指针 移 到 单元 格 上 时 单元 格 背景 颜色 会 发 生变 化 。 如 图 5-2 所 示 为 月 历 效 果 页 面 。 


2017 年 月 

















图 5-2 月 历 效果 页 面 


下 面 介 绍 案例 的 实现 步骤 。 

1) 构建 HTML 结构 

(1) 打开 * 文 件 ?面板 ,在 已 复制 的 文件 夹 * 单 元 5\My Web” 中 创建 一 个 名 为 yueli. 
html 的 网 页 文档 ,并 将 其 打开 。 

(2) 在 设计 界面 中 单 击 “ 插 入 ?面板 “常用 ”类 别 中 的 “表格 "按钮 ,创建 表格 “表格 ?对 
话 框 如 图 5-3 所 示 。 


表格 大 小 





















































标题 2015 年 7 月 | 
甘 要 - 四 
ED E 避 EE 


图 5-3 “表格 ”对 话 框 


(3) 添加 数据 并 修改 表 头 。 依 次 单 击 每 一 个 单元 格 , 输 入 数据 。 这 样 ,一 个 初步 的 月 
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历 表格 即 创建 完成 ,如 图 5-4 所 示 为 在 表格 单元 格 中 输入 数据 。 


2017 年 7 月 
星期 日 ” 星期 一 星期 二 :星期 三 : 星期 四 星期 五 星期 六 


25 26 27 28 29 30 1 
; 3 4 3 看 7 8 
9 10 11 12 13 14 15 
16 17 18 19 20 21 22 
23 :24 25 26 27 28 29 
30 31 1 2 3 4 3 


图 5-4 在 表格 单元 格 中 输入 数据 


(4) 为 了 使 用 CSS 修饰 表格 时 更 方便 准确 ,为 该 表格 添加 id 属性 ,id 名 为 data, 并 删 
除 其 他 多 余 的 代码 ,此 时 的 代码 如 下 : 





<table id= "data"> 











(5) 表格 上 面 2 行 和 最 后 2 行 的 部 分 单元 格 背 景色 较 深 ,需要 单独 处 理 。 为 此 ,在 对 
应 的 单元 格 二 td 二 标签 中 添加 class 属性 ,class 名 为 nouse, 即 在 对 应 单元 格 的 标签 对 中 
输入 class 二 "nouse" 属 性 。 

2) 设置 CSS 样式 属性 

(1) 指定 在 页 面 中 引入 CSS 样式 的 方法 。 使 用 内 嵌 样 式 , 在 “一 head 之 二 /head>” 标 
答对 之 间 输 入 以 下 代码 。 





<style type= "text/css"> 
<!-- 
一 -> 

</style> 











(2) 设置 表格 样式 。 在 前 面 为 表格 二 table 二 标签 定义 了 一 个 id 名 为 data, 因 此 在 
“过 style type 二 "text/css" 请 过 /style” 标 签 对 之 间 输 入 以 下 代码 ,表示 对 整 张 表格 应 用 
人 } 内 的 样式 属性 。 





#data { 
width:800px; /* 设置 表格 宽度 * / 
font- family: Arial, Helvetica, sans- serif; /* 统一 设置 表格 内 的 文字 字体 * / 
font- size: 14px7 /* 统一 设置 表格 文字 的 大 小 * / 
color: #999999; /* 统一 设置 表格 文字 的 颜色 * / 
border- collapse:collapse; /* 将 表格 边框 合并 * / 

} 
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如 果 此 处 不 进行 表格 边框 合并 设置 , 则 在 后 面 为 单元 格 设置 了 边框 后 ,单元 格 边框 的 
粗细 会 变 成 所 设置 的 两 倍 , 两 个 单元 格 之 间 甚 至 可 能 会 有 空隙 。 
(3) 设置 表格 标题 的 文字 样式 。 这 里 用 内 套 选择 器 进行 设置 ,代码 如 下 : 





#data caption { 


font- weight: bold; /* 设置 标题 字体 加 粗 * / 
color: #333333; /* 设 置 标题 文字 的 颜色 * / 
text- align:center; /* 设置 标题 文字 居中 * / 


} 





(4) 设置 表格 表 头 的 样式 。 





#data th { 
background- color: #CCCCCC; /* 设置 表 头 背景 颜色 * / 
border: lpx solid # 666666; /* 设 置 表 头 的 边框 样式 * / 
color: #3399FF; /* 设置 表 头 文字 的 颜色 * / 
width: 100px; /* 设置 表 头 单元 格 的 宽度 * / 
height: 15px; /#* 设置 表 头 单元 格 的 高 度 * / 
padding:10px; /* 设 置 表 头 文字 同 单元 格 边框 间 的 距离 * / 


} 





(5) 设置 单元 格 样式 。 设 置 重点 在 于 边框 样式 ,以 及 文字 统一 居于 左上 角 位 置 。 





#data td{ 
border: lpx solid #666666;  /* 设 置 单元 格 边框 样式 */ 
color: #000000; /* 设置 单元 格 文字 的 颜色 * / 
width: 100px; /* 设 置 单元 格 宽度 x / 
height: 60px; /* 设置 单元 格 高 度 * / 
text- align: left; /* 设置 单元 格 中 文字 水 平 对 齐 方式 为 左 对 齐 * / 
vertical-align: top; /* 设置 单元 格 中 文字 垂直 对 齐 方式 为 顶部 对 齐 * / 


} 











(6) 设置 月 历 中 部 分 单元 格 的 背景 和 文字 颜色 。 在 这 个 月 历 中 6 月 (6 月 25 一 30 日 ) 
和 8 月 (8 月 1 一 5 日) 的 日 期 的 格式 与 其 他 日 期 不 同 (背景 色 为 灰色 ), 需 要 单独 定义 。 在 
前 面 构建 表格 的 HTML 结构 时 ,已 为 这 些 单元 格 单独 定义 了 类 名 nouse。 下 面 就 来 设置 
类 名 为 nouse 的 单元 格 的 样式 。 





.nouse{ 
color:#999999; /x* 设 置 单元 格 文字 的 颜色 * / 
background- color:# CCCCCC; /* 设置 单元 格 背 景 的 颜色 * / 
下 











(7) 为 表格 添加 一 些 动态 效果 , 当 将 鼠标 指针 移 到 表格 的 某 一 单元 格 上 时 ,单元 格 的 
颜色 会 发 生变 化 。 要 让 单元 格 产生 变色 效果 ,需要 用 到 CSS 的 伪 类 选择 器 ,这 里 使 用 伪 
类 hover, 代 码 如 下 : 
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#data td:hover { 
background- color: #0CE; /* 设置 在 将 鼠标 指针 移 到 单元 格 上 时 单元 格 的 背景 颜色 * / 











(8) 一 个 动态 月 历 就 制作 完成 了 , 按 Ctrl 十 S 快捷 键 保 存 网 页 ,然后 按 F12 键 在 浏览 
器 中 预览 效果 。 


【知识 归纳 】 


在 应 用 表格 时 ,有 时 需要 对 单元 格 进 行 拆 分 与 合并 。 实 际 上 ,不 规则 的 表格 是 由 规则 
的 表格 拆 分 合并 而 成 。 拆 分 是 指 将 一 个 单元 格 拆 分 为 多 个 单元 格 。 合 并 是 指 将 多 个 连续 
的 单元 格 合并 成 一 个 单元 格 。 

“< 二 caption 之 二 /caption> "是 表格 的 标题 标签 ,由 于 是 单独 的 标签 ,可 以 方便 地 使 用 
CSS 样式 来 设置 表格 标题 的 显示 效果 。 


任务 5-2 用 户 信息 统计 页 面 一 -CSS 
设置 边框 及 内 外 边 距 


【知识 储备 】 


1. 使 用 CSS 设置 网 页 元 素 的 内 边 距 和 外 边 距 

margin 属性 用 来 设置 元 素 的 外 边 距 , 即 元 素 与 其 他 相 邻 元 素 之 间 的 间距 ; padding 属 
性 用 来 设置 元 素 的 内 边 距 (也 称 填充 ), 即 元 素 内 容 与 元 素 边框 之 间 的 间距 ,如 图 5-5 所 示 
为 元 素 内 边 距 和 外 边 距 属 性 的 设置 。 


上 本 






的 是 全 和 we 

margin 天 

性 设置 的 外 边 距 设置 的 元 素 
元 素 的 内 容 

图 中 用 左 斜 虚线 填充 

的 是 使 用 padding 属 性 

设置 的 填充 (内 边 距 ) ee 

| 相信 元 素 





图 5-5 元 素 内 边 距 和 外 边 距 属性 的 设置 


margin 属性 和 padding 属性 的 使 用 方法 相同 ,可 分 别 用 来 设置 元 素 的 上 \ 右 、 下 \ 左 
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外 边 距 和 内 边 距 。 

1) 边 距 与 填充 属性 

使 用 CSS 设置 网 页 元 素 ,复合 属性 有 边 距 (margin) .填充 (padding) ,如 表 5-1 所 示 为 
设置 网 页 元 素 的 复合 属性 。 





表 5-1 设置 网 页 元 素 的 复合 属性 


























填充 (padding) 属 性 作 用 外 边 距 (margin) 属 性 作 用 
padding-left 左边 内 边 距 margin-left 左边 外 边 距 
padding-right 右边 内 边 距 margin-right 右边 外 边 距 
padding-top 上 方 内 边 距 margin-top 上 方 外 边 距 
padding-bottom 下 方 内 边 距 margin-bottom 下 方 外 边 距 
语法 如 下 : 


margin- top: 边 距 值 
取 值 范围 : 长 度 值 | 百分比 |auto。 
长 度 值 为 设置 项 端的 绝对 边 距 值 ,包括 数字 和 单位 ;百分比 值 则 是 设置 相对 于 上 级 元 
素 的 宽度 的 百分比 ;auto 是 自动 取 边 距 值 , 即 取 元 素 的 默认 值 。 长 度 允 许 使 用 负 值 。 如 
表 5-2 所 示 为 设置 网 页 元 素 的 属性 值 。 
表 5-2 设置 网 页 元 素 的 属性 值 
属性 值 作 用 
auto 让 浏览 器 自动 计算 边 距 。 使 用 此 属性 值 在 某 些 情况 下 会 将 元 素 或 元 素 内 容 居 中 对 齐 
length 使 用 具体 的 数值 和 单位 设置 边 距 , 如 px( 像 素 ) .cm( 厘 米 ) 等 单位 。 默 认 值 是 px 
% 以 父 元 素 宽度 的 百分比 计算 边 距 
inherit 从 父 元 素 继承 边 距 

















可 不 在 margin 属性 和 padding 属性 后 面 加 left right ,top 与 bottom 后 级 ,而 直接 在 
margin 和 padding 后 输入 属性 值 , 并 用 空格 隔 开 。 下 面 以 margin 为 例 说 明 ,如 表 5-3 所 
示 为 属性 组 合 使 用 示例 。 

表 5-3 属性 组 合 使 用 示例 








序号 示 例 说 明 
1 | margin:4px; 设置 上 .下 , 左 、 右 的 外 边 距 为 4 像素 
2 margin:4px 8px; 设置 上 、 下 边 距 为 4 像素 , 左 、 右 边 距 为 8 像素 





3 | margin:4px 8px 5px; 设置 上 边 距 为 4 像素 , 左 .右边 距 为 8 像素 ,下 边 距 为 5 像素 


设置 上 边 距 为 4 像素 ,右边 距 为 8 像素 ,下 边 距 为 5 像素 ,左边 距 
4 margin:4px 8px 5px 3px; 为 3 像素 ( 顺 时 针 方向 ) 











2) 边框 属性 
使 用 CSS 设置 网 页 元 素 的 边框 ,包括 边框 样式 (border-style) .边框 宽度 (border- 
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width) .边框 颜色 (border-color) 和 边框 属性 (border) 。 
设置 边框 宽度 样式 .边框 颜色 时 ,每 一 类 又 包含 5 个 属性 。 如 表 5-4 所 示 为 边框 宽度 
属性 ,如 表 5-5 所 示 为 边框 颜色 属性 。 

















表 5-4 边框 宽度 属性 表 5-5 边框 颜色 属性 
属 性 值 作 用 属 性 值 作 用 
border-top-width 上 边框 宽度 border-color 边框 颜色 
border-right-width 右边 框 宽度 border-top-color 上 边框 颜色 
border-bottom-width 下 边框 宽度 border-right-color 右边 框 颜色 
border-left-width 左边 框 宽度 border-bottom-color 下 边框 颜色 
border-width 宽度 属性 border-left-color 左边 框 颜色 








2. 使 用 CSS 合并 表格 边框 

使 用 CSS 设置 单元 格 边框 时 ,假设 为 每 个 单元 格 都 设置 边框 宽度 为 1px, 那 么 当 两 个 
单元 格 相 邻 的 时 候 , 相 邻 边 的 边框 宽度 实际 上 是 1px 十 1px 一 2px。 为 避免 此 种 情况 发 生 ， 
或 为 了 避免 单元 格 之 间 出 现 空隙 ,可 使 用 border-collapse 属性 将 表格 相 邻 的 边框 合并 。 

border-collapse 属性 的 基本 语法 为 “border-collapse: separate| collapse|inherit;”, 其 
各 属性 值 的 意义 如 表 5-6 所 示 。 


表 5-6 ”border-collapse 的 属性 值 














属性 值 说 明 
separate 边框 会 被 分 开 
collapse 如 果 可 能 ,边框 会 被 合并 为 一 个 单一 的 边框 
inherit 从 父 元 素 继承 border-collapse 的 属性 值 
【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 

实例 素材 位 置 :“ 单 元 5” 目 录 下 的 “文字 . txt? 和 images 子 目 录 。 

效果 文件 位 置 :“ 单 元 5 目录 下 的 boke. html。 


【任务 实施 】 


制作 表格 样式 页 面 统计 用 户 信息 。 此 表格 的 显示 效果 为 表格 有 背景 颜色 衬托 ; 当 将 
鼠标 指针 移 到 单元 格 上 时 ,单元 格 背景 颜色 会 发 生变 化 。 如 图 5-6 所 示 为 表格 样式 页 面 。 
1) 构建 HTML 结构 
(1) 将 素材 实例 文件 夹 复 制 至 创建 My Web 站 点 的 根 目录 中 。 
(2) 启动 Dreamweaver CS, 打 开 “ 文 件 ” 面 板 , 在 复制 的 文件 夹 中 创建 一 个 名 为 
WorldCup-lx. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 
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电话 Email om 

13500100101 adai ngyahoo. com cn 133331 

13500100102 uest§163. com 121244 

13500100103 userl@firefor. 二 445566 
13500100104 ER 人生 454545 骨折 
13500100105 user38263. com 344535 

13500100106 aer48263. com 344536 

13500100107 user58253. com 344537 

13500100108 uaer68263. com 44585 _ 

13500100109 user798263. com 344595 








图 5-6 表格 样式 页 面 


(3) 在 设计 视图 中 定位 插入 点 ,然后 单 击 “ 插 入 ”面板 “常用 ”类 别 中 的 “表格 ”按钮 , 打 
开 “ 表 格 ” 对 话 框 ,设置 各 项 参数 , 单 击 “ 确 定 ” 按 钮 创建 一 张 表格 ,如 图 5-7 所 示 。 


表格 大 小 
























































图 5-7 插入 表格 


(4) 添加 数据 。 用 鼠标 依次 单 击 每 个 单元 格 ,输入 如 图 5-8 所 示 的 表格 数据 。 

(5) 保存 内 容 。 

2) 设置 CSS 样式 属性 

(1) 指定 在 页 面 中 引入 CSS 样式 的 方法 。 本 例 使 用 内 赃 样 式 , 在 “二 head> 二 /head 一 ” 
标签 对 之 间 输 入 以 下 代码 。 
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日 
:再 
革 


re 
:admin :13500100101:admin@yahoo com cn:133331: 
‘guest :13500100102 guest@163.com 121244 
userl 13500100103:ser1@firefox com :445566 
Snser2 13500100104user2@msncom :454545: 
a 1350010010s5anser3@263.com :344535 
Sunser4 :13500100106user4@263.com :344536 
user5 “13500100107 user5@263.com .344537: 
nser6 13500100108nser6@263.com :344585: 
user7 13500100109user7@263.com 344595 


EE LE 
i 


图 5-8 表格 数据 





< style type= "text/css"> 
要 
一 -> 

</style> 











(2) 设置 整体 页 面 文字 的 大 小 。 在 “一 style type 一 "text/css" 二 一 /style 二 "标签 对 之 
间 输 入 以 下 代码 。 





body { 
background- image: url (images/bg4.jpg); /* 设置 整体 页 面 背景 图 片 * / 
background- repeat: no- repeat; /* 设置 整体 页 面 背景 图 片 不 重复 * / 





(3) 设置 表格 边框 和 宽度 等 样式 。 输 入 以 下 代码 。 





table{ 


width:50%; 

border:#FFFFFF solid; 
border- collapse: separate; 
border- spacing:6px; 


trt 
background- color: #DFEFFF; 
border:#FFFFFF solid; 


tr:hover{ 

background- color: #F9BBFS5; 
} 
ta{ 

padding:6px; 

font- size:16px; 

font- weight :bold; 

Color: #039; 





/* 设置 表格 宽度 显示 为 浏览 器 的 50%* / 
/* 设置 边框 颜色 ,宽度 为 1 像素 , 实 线 * / 
/* 设置 表格 边框 合并 方式 * / 

/* 设置 表格 边框 间距 为 6 像素 * / 


/* 设置 表格 行 背景 的 颜色 * / 
/* 设置 边框 颜色 , 实 线 * / 


/* 设置 单 击 单元 格 后 行 显示 的 颜色 * / 


/* 设置 单元 格 内 边 距 大 小 为 6 像素 / 
/* 设置 单元 格 内 字体 为 16 像 素 * / 
/* 设置 单元 格 内 字体 加 粗 * / 

/* 设置 文字 的 颜色 * / 
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(4) 保存 文件 。 按 Ctrl 十 S 快捷 键 保 存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 


【知识 归纳 】 


了 解构 建 表格 HTML 结构 和 使 用 CSS 美化 表格 的 方法 ;灵活 掌握 与 表格 相关 的 
HTML 标签 的 用 法 ;表格 常用 标签 为 <table> .<<tr> .<<td> 等 。 


任务 拓展 


制作 如 图 5-9 所 示 网 页 预览 效果 ,素材 参照 本 单元 的 文件 夹 。 














图 5-9 网 页 预览 效果 
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菜单 制作 


网 页 菜单 是 网 页 构成 的 重要 部 分 ,菜单 应 用 是 适应 各 种 行业 的 用 户 视觉 操作 体验 , 方 
便 用 户 触发 请 求 ,信息 传递 的 基本 工具 。 菜 单 效 果 反 映 了 项 目的 经 营 方针 和 宣传 目标 。 
菜单 既是 艺术 品 又 是 宣传 品 ,是 一 种 文化 的 传承 。 

教学 目标 ， 

。 掌握 使 用 HTML 构建 导航 栏 结构 , 以 及 使 用 CSS 设置 导航 栏 样式 的 方法 。 

。 掌握 使 用 CSS 制作 纵向 导航 栏 的 方法 。 

。 掌握 使 用 CSS 制作 横向 导航 栏 的 方法 。 

。 掌握 使 用 CSS 制作 下 拉 菜 单 的 方法 。 


任务 6-1 仿 当 当 网 书籍 菜单 一 一 
纵向 列表 菜单 


【知识 储备 】 


在 HTML 5 中 ,导航 栏 是 由 过 nav 之 标签 定义 的 。 导 航 栏 一 般 分 为 横向 和 纵向 ,针对 
使 用 二 nav 二 标签 制作 的 导航 栏 , 横 向 菜单 无 须 改 变 结构 ,只 需 设置 样式 的 变化 即 可 ;此 处 
制作 的 纵向 列表 菜单 ,需要 使 用 "display: block;” 属 性 改变 超 链接 列表 的 结构 。 

1. 合理 利用 “display:block” 属 性 

display 属性 规定 元 素 的 显示 类 型 ,其 具有 多 个 不 同 的 属性 值 ,其 中 “display: block” 
表示 将 元 素 转换 为 块 级 元 素 。 要 对 行内 元 素 进 行 有 关 高 度 、 宽 度 等 样式 的 设置 ,就 需要 为 
此 行内 元 素 添加 “display:block” 属 性 ,将 其 转换 为 块 级 元 素 。 

2. 利用 border 设置 特殊 边框 

利用 border 可 以 对 4 个 方向 的 边框 分 别 进行 设置 。 因 此 在 设置 边框 的 时 候 , 可 以 单 
独 设置 一 个 方向 的 边框 ,也 可 以 对 多 个 方向 的 边框 分 别 进行 不 同 的 样式 设置 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
实例 素材 位 置 :“ 单 元 6 目录 下 的 My Web 子 目录 。 
效果 文件 位 置 :“ 单 元 6 目录 下 的 menul. html。 
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【任务 实施 】 

要 制作 一 个 仿 当 当 网 书籍 类 纵向 列表 菜单 。 此 菜单 显示 效果 如 图 6-1 所 示 。 它 以 传 
统 中 国 汉代 造纸 工艺 为 背景 。 纵 向 列表 菜单 中 , 当 鼠 标 指针 移动 到 单元 格 上 时 ,单元 格 背 
景 颜色 和 文字 颜色 会 发 生变 化 。 








和 流 代 于 虐 工 罗 汽 程 加 ks 


6-1 纵向 列表 菜单 











1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 打开 “文件 ”面板 ,在 已 复制 的 文件 夹 中 创建 一 个 名 为 menul. html 的 网 页 文档 。 

(3) 在 Dreamweaver 中 打开 新 建 的 文档 ,在 body 区 域 输入 文字 “图 书 分 类 ”人文 社 
科 ”历史 古籍 ”哲学 宗教 ”社会 科学 ”科普 百科 ”。 

(4) 选中 所 有 输入 的 文字 ,插入 二 nav 二 标签 。 

(5) 添加 超 链接 , 即 为 文字 添加 超 链接 标签 二 a 之 。 选 中 文字 ,因为 还 没有 需要 跳 转 
的 页 面 ,所 以 在 “链接 ?编辑 框 中 输入 "# ”符号 表示 插入 空 链 接 , 然 后 单 击 “ 确 定 ” 按 钮 。 

(6) 依次 为 * 人 文 社 科 ”历史 古籍 ”哲学 宗教 ”社会 科学 ”科普 百科 ”这 些 文字 添加 
超 链接 。 

(7) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 

2) 设置 CSS 样式 属性 

(1) 指定 在 HTML 页 面 中 引入 CSS 样式 表 的 方法 ,这 里 使 用 内 嵌 样 式 ,在 “二 head 二 
去 /head>" 标 签 对 之 间 添 加 以 下 代码 。 





< style type= "text/css"> 
二 
--> 

</style> 





(2) 设置 超 链接 样式 ,包括 纵向 排列 ,消除 下 夯 线 ,设置 文字 大 小 和 颜色 ,设置 背景 颜 
色 和 内 边 距 等 。 标 签 对 之 间 输 入 代码 如 下 : 





nav{ 
background- image:url(6a.png); /* 设 置 背 景 图 片 * / 
width:952px; /* 设 置 背景 图 片 宽 度 为 952 像素 * / 
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height:200px; /x 设置 背景 图 片 高 度 为 200 像素 * / 
padding- top: 65px; /* 设 置 距离 内 边 距 上 边 距 为 65 像素 * / 
padding- left:15px; /* 设 置 内 边 距 左边 距 为 15 像素 * / 


3} 











(3) 设置 鼠标 光标 移 到 超 链 接 上 时 , 超 链接 文字 颜色 发 生变 化 的 效果 使 用 hover 伪 
类 ,标签 对 输入 代码 如 下 : 





#dh a:hover{ 
Color:#FFFFFF; /* 设置 超 链接 在 hover 状态 时 的 文字 颜色 * / 
background- color: #000033; ”/* 设置 超 链接 在 hover 状态 时 的 背景 色 * / 
border- left-width: 10px; /* 设 置 超 链接 在 hover 状态 时 左边 框 的 宽度 为 10 像素 * / 


border- left- style: solid;  /* 设 置 超 链接 在 hover 状态 时 左边 框 的 线 型 为 实 线 * / 
border- left- color:# D8D803; /# 设置 超 链接 在 hover 状态 时 左边 框 的 颜色 * / 
} 











(4) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 


【知识 归纳 】 


nav 是 与 导航 相关 的 ,所 以 一 般 用 于 网 站 导航 布局 。 同 时 完全 就 像 使 用 二 div 二 标 
得 二 span 二 标签 一 样 ,使 用 二 nav 二 标签 可 添加 id 或 class。 而 与 二 div 之 标签 不 同 的 是 ,此 
标签 一 般 只 用 于 导航 相关 的 地 方 , 所 以 在 一 个 HTML 网 页 布局 中 可 能 就 使 用 在 导航 条 处 ， 
或 与 导航 条 相关 的 地 方 布局 使 用 。 在 一 般 布 局 中 二 nav 二 标签 与 过 ul li> 标 签 配合 使 用 。 

因为 “<nav 二 二 /nav 过 ”标签 对 是 HTML 5 新 增 的 标签 ,而 IE 8 及 以 下 IE 浏览 器 
(IE 8、IE 7、IE 6) 对 其 不 支持 ,所 以 根据 需求 选择 布局 HTML。 

二 nav 记 是 新 增 的 HTML 标签 ,只 要 HTML 中 使 用 二 nav 二 > 标签, 这样 的 HTML 布 
局 就 变 成 使 用 HTML 5 布局 的 网 页 ,但 HTML 5 新 增 标签 局 限 性 , 低 版 本 IE 浏览 器 不 
支持 (如 果 低 版 本 浏览 器 浏览 新 增 HTML 5 标签 ,对 应 布局 将 失效 ,设置 CSS 样式 也 是 
无 效 的 ) ,所 以 应 谨慎 选择 使 用 。 一 般 传统 网 页 通常 不 会 使 用 HTML 5 新 增 布局 ,所 以 注 
意 选择 使 用 。 智 能 手机 、 平 板 电脑 浏览 网 页 可 以 适当 使 用 HTML 5 新 增 标签 或 新 增 CSS 
3 样式 布局 。 





任务 6-2 仿 天 猫 商品 菜单 一 横向 列表 菜单 


【知识 储备 】 
导航 菜单 是 经 常 遇 到 的 ,特别 是 水 平 导航 菜单 几乎 每 个 网 站 都 会 用 到 。 制 作 水 平 导 
航 菜单 ,设置 行内 元 素 的 属性 为 “float:left” 以 后 ,就 不 需要 再 设置 “display:block” 属 性 ， 
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除非 这 个 元 素 有 显示 和 隐藏 状态 的 切换 , 即 “display:hidden” 属 性 和 “display:block” 属 性 


的 切换 。 


在 设置 导航 菜单 中 ,border 是 常用 标签 。border 属性 是 边框 的 意思 ,通过 此 属性 可 以 设 


置 上 、 下 、 左 、 右 的 边框 ,也 可 以 单独 进行 设置 。 如 表 6-1 所 示 为 border 元 素 边框 属性 。 


表 6-1 border 元 素 边框 属性 














元 素 属 性 
border-bottom 简写 属性 ,用 于 把 下 边框 的 所 有 属性 设置 到 一 个 声明 中 
border-bottom-color 设置 元 素 的 下 边框 的 颜色 
border-bottom-style 设置 元 素 的 下 边框 的 样式 
border-bottom-width 设置 元 素 的 下 边框 的 宽度 





border-left 


简写 属性 ,用 于 把 左边 框 的 所 有 属性 设置 到 一 个 声明 中 





border-left-color 


设置 元 素 的 左边 框 的 颜色 



































border-left-style 设置 元 素 的 左边 框 的 样式 
border-left-width 设置 元 素 的 左边 框 的 宽度 
border-right 简写 属性 ,用 于 把 右边 框 的 所 有 属性 设置 到 一 个 声明 中 
border-right-color 设置 元 素 的 右边 框 的 颜色 
border-right-style 设置 元 素 的 右边 框 的 样式 
border-right-width 设置 元 素 的 右边 框 的 宽度 
border-top 简写 属性 ,用 于 把 上 边框 的 所 有 属性 设置 到 一 个 声明 中 
border-top-color 设置 元 素 的 上 边框 的 颜色 
border-top-style 设置 元 素 的 上 边框 的 样式 
border-top-width 设置 元 素 的 上 边框 的 宽度 
【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 


文件 夹 。 


实例 素材 位 置 :“ 单 元 6” 目 录 下 的 My Web 子 目录 。 
效果 文件 位 置 :“ 单 元 6” 目 录 下 的 menu2. html。 


【任务 实施 】 


要 制作 一 个 仿 天 猫 商品 类 横向 列表 菜单 , 当 鼠 标 指针 移动 到 单元 格 上 时 ,单元 格 背景 


颜色 和 文字 颜色 会 发 生变 化 ,如 图 6-2 所 示 为 横向 列表 菜单 。 





TMALL 


理想 生活 上 天 列 
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1) 构建 HTML 结构 

(1) 打开 “文件 ”面板 ,在 文件 夹 中 创建 一 个 名 为 menu2. html 的 网 页 文档 。 

(2) 在 Dreamweaver 中 打开 新 建 的 文档 ,在 代码 界面 的 body 部 分 输入 文字 “商品 分 
类 ”潮流 前 言 手机 酷 玩 ”品质 生活 ”国际 海 购 ”个 性 推荐 ”。 

(3) 添加 超 链接 , 即 为 文字 添加 超 链 接 标 签 二 a 之 。 选 中 输入 文字 ,为 文字 添加 空 链 
接 “#”, 然 后 参照 同样 的 方法 为 其 他 文字 添加 空 链接 。 

(4) 将 文字 用 二 nav 二 标签 括 起 来 ,插入 二 nav 二 标签 。 

2) 设置 CSS 样式 属性 

(1) 指定 在 页 面 中 引入 CSS 样式 的 方法 。 使 用 内 嵌 样 式 ,在 “<head> 一 /head>” 标 
签 对 之 间 输 入 以 下 代码 。 





< style type= "text/css"> 
二 二 
--> 

</style> 











(2) 为 二 nav 二 块 设置 样式 ,包括 设置 背景 颜色 和 高 度 ,以 及 其 内 的 文字 大 小 和 颜色 
等 。 本 例 中 二 nav 二 块 的 id 为 topmenu, 所 以 用 “#topmenu” 选 择 器 来 控制 其 样式 。 在 
“<style type 一 "text/css" 二 二 /style 二 ”标签 对 之 间 输 入 以 下 代码 。 





#topmenu { 
font- family:" 微 软 雅 黑 "; /* 设 置 <nav> 块 中 文字 字体 为 微软 雅 黑 * / 
font- size:16px; /* 设 置 <nav> 块 中 文字 的 大 小 为 16 像 素 * / 
font- weight :bold; /* 设 置 <nav> 块 中 文字 字体 加 粗 * / 
color: #ffffff; /* 设 置 <nav> 块 中 文字 的 颜色 * / 
height:50px; /* 设 置 <nav> 块 的 高 度 为 50 像素 * / 


} 





(3) 为 二 nav 二 块 中 的 超 链 接 标 签 二 a 二 设置 样式 。 在 步骤 (2) 输 入 的 代码 下 方 添加 
以 下 代码 。 





#topmenua { 
background: #F36; /* 设置 <nav> 块 的 背景 颜色 * / 
width:200px; /* 设置 超 链接 的 宽度 为 200 像 素 * / 
margin- right :10px; /x* 设置 右 侧 外 边 距 的 宽度 为 10 像素 * / 
margin- right- color:# FFF; /x* 设置 右 侧 外 边 距 的 颜色 * / 
color: #FFF; /* 设置 超 链接 的 文字 颜色 * / 
text- decoration: none; /* 去 掉 超 链接 的 下 面 线 * / 
float:left; /* 将 超 链接 设置 为 向 左 浮动 * / 
text- align: center; /* 设置 超 链接 的 文字 对 齐 方式 为 居中 对 齐 * / 
line- height:50px; /* 设置 超 链接 的 行 高 为 50 像素 * / 


} 











(4) 设置 超 链接 在 hover 状态 下 的 效果 。 在 步骤 (3) 输 入 的 代码 下 方 添加 以 下 代码 。 
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#topmenu a:hover { 
background: #F90; /* 设置 超 链接 在 hover 状态 下 的 背景 色 * / 
color: # fff7 /* 设置 超 链接 在 hover 状态 下 的 文字 颜色 * / 
} 











(5) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 。 
一 个 简单 的 横向 导航 栏 就 完成 了 。 


【知识 归纳 】 


导航 在 网 页 中 是 必 不 可 少 的 部 分 ,从 视觉 角度 来 看 ,导航 可 分 为 纵向 导航 、 横 向 导航 
和 下 拉 列 表 导 航 。 透 过 现象 看 本 质 , 导 航 可 以 归纳 为 一 个 列表 ,因此 设计 者 通常 采用 无 序 
列表 实现 导航 模式 菜单 效果 。 


任务 6-3 仿 阿里 巴巴 集团 商品 菜单 一 一 
下 拉 列 表 菜 单 


【知识 储备 】 


1. 用 * 号 设置 全 局 样式 

对 网 页 进行 样式 设置 时 ,有 时 会 遇 到 需要 设置 全 局 样式 的 情况 ,也 就 是 设置 页 面 上 所 
有 标签 ,类 ,id 都 使 用 的 共有 样式 。CSS 提供 了 一 种 解决 方法 ,就 是 使 用 * 人 选择 器 。 由 
该 选择 器 定义 的 样式 ,默认 会 被 浏览 器 页 面 上 所 有 的 内 容 都 采用 。 

2. 对 特定 标签 下 的 子 标签 设置 样式 

要 给 不 同位 置 的 标签 添加 样式 ,一 种 方法 是 为 这 些 不 同位 置 的 标签 设置 对 应 的 class 
或 id, 但 这 样 会 使 页 面 上 有 大 量 的 class 或 id, 不 利于 样式 的 处 理 ; 另 一 种 方法 就 是 使 用 父 
标签 加 子 标签 的 形式 ,也 就 是 利用 在 单元 2 学 习 的 旗 套 选择 器 。 

语法 如 下 : 


父 标签 子 标签 孙 标 签 曾孙 标签 .…{} 


其 中 , 父 标 签 . 子 标签 等 既 可 以 是 标签 名 称 ,也 可 以 是 class 名 或 id 名 。 

3. CSS 中 的 ul 与 上 i 样式 详解 

列表 是 指 在 网 页 中 将 相关 资料 以 条 目的 形式 有 序 或 者 无 须 排列 而 形成 的 表 。 常 见 的 
列表 包括 无 序列 表 (ul) 有 序列 表 (ol) 和 定义 列表 (dl)3 种 ,还 有 不 常用 的 目录 列表 (dir) 
和 菜单 列表 (menu)。 利 用 列表 来 制作 复杂 的 多 重 菜单 也 是 现在 流行 的 方法 。 

(1) 有 序列 表 是 按照 字母 或 数字 等 顺序 排列 的 列表 项 目 。 注 意 有 序列 表 的 结果 是 带 
有 前 后 顺序 之 分 的 编号 ,如 果 插 入 和 删除 一 个 列表 项 ,编号 会 自动 调整 。 

(2) 无 序列 表 是 一 个 没有 特定 顺序 的 列表 项 的 集合 ,也 称 为 项 目 列 表 。 在 无 序列 表 
中 ,各 个 列表 之 间 属 于 并 列 关 系 , 没 有 先后 顺序 之 分 ,它们 之 间 以 一 个 项 目 符号 来 标记 。 
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使 用 无 序列 表 标 签 二 ul 二 的 type 属性 (使 用 CSS 的 list-style 属性 来 代替 ) ,用 户 可 以 指定 
出 现在 列表 项 前 的 项 目 符号 的 样式 ,主要 有 disc( 实 心 圆 点 ) .circle( 空 心 圆 点 ) square( 实 
心 方块 ) .none( 无 项 目 符号 ) 。 

在 CSS 中 ,有 专门 控制 列表 的 属性 ,常用 的 有 list-style-type 属性 、list-style-image 属 
性 \listrstyle-position 属性 和 list-style 属性 。 

1) list-style-type 属性 

list-style-type 属性 是 用 来 定义 li 列表 的 项 目 符号 的 , 即 列表 前 面 的 修饰 。list-style- 
type 属性 是 一 个 可 继承 的 属性 。 其 语法 结构 如 下 : 


list- style- type:none/disc/circle/square/demical/lower- alpha/upper- alpha/lower- roman/ 

upper- roman 

list-style-type 属性 值 含义 : none 表示 不 使 用 项 目 符号 ;disc 表示 实心 圆 点 ;circle 表 
示 空 心 圆 点 ;square 表示 实心 方块 ;demical 表示 阿拉 伯 数 字 ;lower-alpha 表示 小 写 英 文 
字母 ;upper-alpha 表示 大 写 英文 字母 ;lower-roman 表示 小 写 罗马 数字 ;upper-roman 表 
示 大 写 罗马 数字 。 

2) list-style-image 属性 
ist-style-image 属性 用 来 定义 使 用 图 片 代替 项 目 符号 。 它 也 是 一 个 可 继承 的 属性 ， 
其 语法 结构 如 下 : 


none/url 


ist-style-image 属性 值 含义 : none 表示 没有 替换 的 图 片 ;url 表示 对 象 的 列表 项 标记 
的 图 像 。 
3) list-style-position 属性 

ist-style-position 属性 是 用 来 定义 项 目 符号 在 列表 中 显示 位 置 的 属性 。 它 同样 是 一 
个 可 继承 的 属性 。 其 语法 结构 如 下 : 

inside/outside 

ist-style-position 属性 值 含 义 : inside 表示 项 目 符号 放置 在 文本 以 内 ;outside 表示 项 
目 符号 放置 在 文本 以 外 。 

4) list-style 属性 

ist-style 属性 是 综合 设置 li 样式 的 属性 ,也 是 一 个 可 继承 的 属性 。 其 语法 结构 如 下 : 








1i- style:list- style- type/list- style- image/list- style- position 


其 中 各 个 值 的 位 置 可 以 交换 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 
文件 夹 。 
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实例 素材 位 置 :“ 单 元 6 目录 下 的 “文字 . txt? 和 images 子 目录 。 
效果 文件 位 置 :“ 单 元 6 目录 下 的 menu3. html。 


【任务 实施 】 


要 制作 一 个 仿 阿里 巴巴 集团 商品 下 拉 列 表 菜 单 , 当 鼠标 指针 移动 到 单元 格 上 时 ,单元 
格 背景 颜色 和 文字 颜色 会 发 生变 化 ,如 图 6-3 所 示 为 下 拉 列 表 菜 单 。 


EDAlibaba Group 
网 如 外 巴 呈 可 

















图 6-3 下 拉 列表 菜单 


1) 构建 HTML 结构 

(1) 打开 “文件 ”面板 ,在 文件 夹 中 创建 一 个 名 为 menu3. html 的 网 页 文档 。 

(2) 在 Dreamweaver 中 打开 新 建 的 文档 ,在 代码 界面 的 body 部 分 输入 作为 一 级 菜 
单 的 文字 :“ 首 页 ”企业 新 闻 ”“ 产 品 信息 ”特价 促销 “联系 我 们 ”和 “新 手 论坛 ”, 如 
图 6-4 所 示 。 





“| 首页 企业 新 闻 产品 信息 特价 促销 联系 我 们 新 手 论坛 








日 加 国 全 350v 





6-4 文字 输入 


(3) 在 代码 界面 中 选择 前 面 输入 的 文字 , 单 击 “ 插 入 ”面板 “结构 ”类 别 中 的 “ul 项 目 列 
表 " 按 钮 ,为 所 选 文字 添加 无 序列 表 标 签 <ul> 。 

(4) 依次 选中 “首页 “企业 新 闻 ”“ 产 品 信 息 ”“ 特 价 促销 ”“ 联 系 我 们 “新手 论坛 ” 文 
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字 , 单 击 “ 插 入 "面板 “结构 "类别 中 的 “li 列表 项 ”按钮 ,分 别 为 这 些 文本 添加 列表 项 标签 
二 li> ,如 图 6-5 所 示 。 


9 <1i> 首 页 </1i> 
< Ui> 企 业 新 闻 </11> 
| <1i> 产 品 信息 </1i> 








6-5 列表 标签 


(5) 为 文字 添加 超 链接 标签 一 a 之 。 选 中 * 首 页 "文字 ,在 “链接 ”编辑 框 中 输入 # ” 符 
号 , 单 击 “ 确 定 ” 按 钮 。 依 次 为 “企业 新 闻 ”“ 产 品 信息 ”“ 特 价 促销 “联系 我 们 “新手 论坛 ” 
文字 添加 超 链接 。 

(6) 添加 一 个 二 nav 二 块 标签 。 在 代码 界面 中 插入 二 nav 二 块 标签 。 

(7) 添加 二 级 菜单 。 在 代码 界面 body 部 分 的 “a href 一 "# "之 首页 二 /a> ”代码 下 
面 输入 作为 “首页 ”的 二 级 菜单 文字 为 “最 新 更 新 ”和 “下 载 排行 ”, 为 两 段 文字 添加 二 ul 二 、 
二 li> 和 二 a 二 标签 。 

(8) 依次 为 其 他 一 级 菜单 添加 对 应 的 二 级 菜单 文字 及 二 ul 二 ,过 li> 和 二 a 二 标签 ,如 
图 6-6 所 示 。 

(9) 插入 图 标 图 片 。 在 代码 界面 中 插入 图 片 标签 。 在 二 nav 记 元 素 标签 前 插入 图 标 
图 片 , 代 码 如 下 : 





< img src= "images/3al.PNG"> 











2) 设置 CSS 样式 属性 
(1) 指定 在 页 面 中 引入 CSS 样式 的 方法 。 使 用 内 嵌 样 式 , 在 “二 head> 志 /head>” 标 
签 对 之 间 输 入 以 下 代码 。 





< style type= "text/css"> 
这 二 
一 -> 

</style> 





(2) 设置 整体 页 面 所 有 标签 的 通用 属性 。 在 “一 style type 一 "text/css" 二 一 /style 二 ” 
标签 对 之 间 输 入 以 下 代码 。 





margin:07 /* 设置 页 面 所 有 标签 的 外 边 距 为 0x / 
padding:07 /= 设置 页 面 所 有 标签 的 内 边 距 为 0* / 
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<nav> 
<ut 
<Li><a href="#"> 首 页 </a> 
<uU 
<Li><a href="s"> 最 新 更 新 </a></1i> 
<Li><a href="#"> 下 载 排行 </a></Ui> 
<j/ut> 
</Li> 
<Li><a href="#"> 企 业 新 闻 </a> 
<ut 
<ti><a href="g"> 企 业 介绍 </a></1i> 
<li><a href="#"> 最 新 动态 </a></1i> 
</ut> 
</ti> 
<Li><a href="#"> 产 品 信息 </a> 
< b> 
<Li><a href="#"> 最 新 产品 </a></Ui> 
<Li><a href="#"> 产 品 列表 </a></Ui> 
</ut> 
</U> 
<Li><a href="#"> 特 价 促销 </a> 


四 [IO 可 





> 促销 </a></Li> 
> 最 新 推荐 </a></11> 
<Li><a href="#"> 产 品 列表 </a></Li> 
</uU 
</ti> 
<Li><a href="#"> 联 系 我 们 </a> 


只 
局 
四 
中 
is 
EE 
二 
Ea 





> 公司 信息 </a></Ui> 
> 联系 我 们 </a></Li> 
> 公司 地 图 </a></Ui> 


<Ui><a href="#"> 新 手 论坛 </a> 
<ut 
<Li><a href="#"> 你 问 我 答 </a 冰 /1i> 
<1i><a href="#"> 网 站 大 学 堂 </a></11> 








6-6 菜单 文字 


(3) 设置 二 li 标签 的 样式 ,输入 的 代码 如 下 : 





li{ 
list- style:none; /* 设 置 列表 项 无 编号 * / 
text- align:center; /* 设置 列表 项 的 文字 为 居中 * / 
line- height:44px; /* 设置 列表 项 的 行 高 * / 

} 





(4) 设置 超 链接 样式 ,输入 的 代码 如 下 所 示 。 此 时 按 F12 键 , 可 在 浏览 器 中 看 到 效果 。 





af 
text- decoration:none; /#* 设置 超 链接 无 下 画 线 * / 
color: #606; /* 设 置 超 链接 文字 的 颜色 * / 
font- size:16px; /* 设 置 超 链接 文字 的 大 小 x* / 
line- height:44px; /* 设置 超 链接 的 行 高 * / 
display:block; /* 将 超 链接 转换 为 块 级 元 素 * / 
font- family:" 微 软 雅 黑 "; 。 “/* 设 置 字体 样式 */ 
font- weight :bold; /* 设 置 字体 加 粗 * / 

} 











(5) 导航 栏 的 初步 样式 已 经 完成 ,将 要 调整 二 nav 二 块 及 其 包含 的 元 素 样式 。 首 先 设 
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置 该 <nav 之 块 中 第 一 级 列表 项 标签 天 li 二 的 样式 ,完成 后 在 浏览 器 中 预览 页 面 。 如 
图 6-7 所 示 为 菜单 效果 。 








nav ul li{ 
width:165px; /x* 设 置 <1i> 标 签 的 宽度 为 165 像素 * / 
float:left; /x* 设 置 <1i> 标 签 向 左 浮动 * / 
border: lpx # 333 dashed; /* 设 置 <1i> 标 签 边框 的 粗细 、 颜 色 及 线 型 * / 
background: #F93; /* 设 置 <1i> 标 签 的 背景 色 */ 

} 














图 6-7 菜单 效果 


(6) 隐藏 二 级 菜单 。 样 式 设置 中 nav ul li(} 只 影响 了 二 nav 二 块 中 的 第 一 级 的 二 ul 二 
标签 和 二 li 二 标签 ,而 对 第 二 级 的 二 ul 二 标签 和 二 1 二 标签 并 没有 产生 向 左 浮动 的 效果 。 
在 需求 中 ,二 级 菜单 的 默认 状态 是 隐藏 的 ,由 于 二 级 菜单 的 二 ul 二 标签 是 位 于 一 级 菜单 的 
<<1i>> 下 面 , 输 入 以 下 代码 来 隐藏 二 级 菜单 。 





nav ul liul{ 
display:none; /* 设 置 二 级 菜单 默认 隐藏 * / 
} 











(7) 设置 一 级 菜单 中 <<li> 标 签 下 二 a 二 标签 的 hover 状态 样式 。 设 置 完 成 后 ,保存 
并 在 浏览 器 中 预览 网 页 ,可 以 看 到 效果 (鼠标 指针 移 到 “产品 信息 ”上 )。 





nav ul li a:hover{ 
color:#fff; /* 设置 hover 状态 时 <a> 标 签 的 文字 颜色 * / 
background- color: #CCC; /* 设置 hover 状态 时 <a> 标 签 的 背景 色 * / 

} 











(8) 显示 二 级 菜单 。 要 显示 被 隐藏 的 二 级 菜单 ,只 需 设置 display 属性 为 block 即 可 。 
设置 完成 后 ,在 浏览 器 中 预览 网 页 。 





nav ul li:hover ul, .nav ul li a:hover ul { 


display:block; /* 设 置 display 属性 为 block, 即 显示 * / 
width:120px; /* 设 置 二 级 菜单 列表 项 宽度 x* / 
height:24px; /* 设 置 二 级 菜单 列表 项 高 度 * / 


} 








(9) 设置 二 级 菜单 样式 。 经 过 上 述 设 置 后 ,二 级 菜单 的 背景 色 还 是 和 一 级 菜单 一 样 
的 ,下 面 就 对 二 级 菜单 的 列表 项 样式 做 简单 调整 。 
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navul liullif{ 
background- color:# FEE; /* 设 置 二 级 菜单 的 背景 色 * / 
width:120px; /* 设 置 二 级 菜单 的 宽度 (可 自行 定义 宽度 ) * / 





(10) 设置 二 级 菜单 hover 状态 时 的 样式 。 保 存 文档 并 在 浏览 器 中 查看 。 





nav ul ul li a:hover{ 
background:#F7F7B9; 
Color:#666666; 





} 








(11) 添加 背景 图 片 。 可 以 看 到 如 图 6-8 所 示 的 下 拉 菜 单 导航 效果 。 





E27 Nbebe Group 
网 要 巴 巴 用 








图 6-8 下 拉 菜 单 导航 效果 





body { 
background- image: url (images/bgl.PNG); /* 设 置 背 景 图 片 */ 
background- repeat: no- repeat; /* 设置 背景 图 片 不 重复 * / 
} 











(12) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 。 


一 个 下 拉 列 表 菜单 导航 栏 就 完成 了 。 


【知识 归纳 】 


要 为 某 个 标签 下 面 的 子 标签 设置 样式 ,只 需 将 该 标签 的 名 称 (或 类 名 \id 名 ) 写 在 前 
面 即 可 。 例 如 ,设置 类 名 为 menu 的 二 div 之 标签 下 的 二 ul> 标 签 样式 ,可 以 写成 . menu ul 
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{}。 这 样 设置 的 好 处 在 于 样式 只 会 影响 指定 位 置 的 标签 ,而 对 于 其 他 地 方 的 标签 不 会 有 
任何 影响 。 

* 号 代表 所 有 标签 的 通用 属性 ,在 * 选择 器 中 设置 的 CSS 样式 将 会 被 页 面 中 所 有 标 
签 共同 使 用 。 为 了 清空 在 各 种 浏览 器 上 可 能 出 现 的 内 边 距 和 外 边 距 ,统一 将 其 定义 为 
0 像素 。 


任务 拓展 


(1) 制作 一 个 纵向 列表 菜单 。 该 菜单 由 无 序列 表 构 成 , 当 鼠 标 光标 移 到 此 菜单 的 某 
一 项 上 时 ,此 项 超 链接 文字 会 产生 下 画 线 。 

(2) 制作 一 个 横向 列表 菜单 。 该 菜单 由 无 序列 表 构 成 ,为 蓝 色 背 景 。 当 鼠标 光标 移 
到 此 菜单 的 某 一 项 上 时 ,该 项 的 背景 会 被 背景 图 像 蔡 换 。 
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单元 7 注册 页 面 一 一 Axure 动态 面板 与 
表单 在 网 页 中 的 应 用 


表单 在 网 页 中 的 作用 不 可 小 视 , 应 用 表单 可 以 收集 来 自用 户 的 信息 ,表单 通常 的 用 处 
包括 网 上 调查 、 网 上 订单 和 建立 搜索 界面 等 。 当 用 户 在 表单 中 完成 各 种 信息 的 输入 ,并 且 
将 表单 提交 后 ,通过 服务 器 端的 应 用 程序 或 者 脚本 程序 ,信息 就 会 反馈 到 服务 器 ,并 被 转 
换 为 可 以 识别 的 数据 ,存储 在 数据 库 中 ,从 而 实现 与 客户 的 交互 ,表单 是 网 页 浏览 者 与 网 
站 服务 器 之 间 进 行 信息 传递 的 重要 工具 。 

学 习 表 单 在 网 页 中 的 应 用 , 先 用 Axure 进行 页 面 的 原型 设计 ,体验 用 户 的 实时 操作 ， 
再 进行 表单 页 面 结构 和 CSS 样式 属性 设置 。 

教学 目标 : 

。 了 解 认识 Axure 的 动态 面板 。 

。 掌握 Axure 的 动态 面板 的 条 件 设置 。 

。 掌握 向 网 页 中 插入 表单 标签 。 

。 利用 表单 元 素 制 作 较 为 复杂 的 表单 页 面 ,能 对 表单 元 素 进行 灵活 运用 。 


任务 上 1 仿 富 淘 全 球 购 网 站 登录 
界面 一 表单 结构 





【知识 储备 】 


表单 是 网 页 元 素 中 非常 重要 的 元 素 之 一 ,也 是 网 站 是 否 具 有 交互 功能 的 重要 体现 。 
表单 主要 负责 数据 采集 ,可 以 收集 用 户 的 信息 并 将 其 存储 在 服务 器 中 。 下 面 介绍 常用 表 
单 标签 的 结构 及 用 法 。 


1. 表单 标签 <form 二.…</form 之 
格式 如 下 : 


< form name = "form name" action= "URL" method= "GET|POST"> ...< /FORM> 

主要 参数 说 明 如 下 。 

。 name: 定义 表单 的 名 称 。 

。， action: 用 来 指定 表单 处 理 程 序 的 位 置 (ASP 等 服务 器 端 脚本 处 理 程序 ) 。 
。 method: 定义 表单 结果 从 浏览 器 传送 到 服务 器 的 方式 ,默认 参数 为 get。 
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2. 文本 框 

文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ,通常 被 用 来 填写 单个 字 或 者 简短 
的 回答 ,如 姓名 、 地 址 等 。 

格式 如 下 : 

<input type= "text" name="..." size="..." maxlength="..." value="..."> 

主要 参数 说 明 如 下 。 

。 type 一 "text" : 定义 单行 文本 框 。 

。 name: 定义 文本 框 的 名 称 。 要 保证 数据 的 准确 采集 ,必须 定义 一 个 独一无二 的 名 称 。 

。 size: 定义 文本 框 的 宽度 ,单位 是 单个 字符 宽度 。 

。 maxlength: 定义 最 多 输入 的 字符 数 。 

。 value: 定义 文本 框 的 初始 值 。 

3. 密码 框 

密码 框 是 一 种 特殊 的 文本 框 , 它 的 不 同 之 处 是 当 输 入 内 容 时 , 均 以 * 表示 ,以 保证 密 
码 的 安全 性 。 

格式 如 下 : 


<input type= "password" name="..." size="..." maxlength="..."> 

4. 按钮 

按钮 可 分 为 普通 按钮 ,提交 按钮 和 重 置 按钮 。 

1) 普通 按钮 

当 type 的 类 型 为 button 时 ,表示 该 输入 项 输入 的 是 普通 按钮 。 
格式 如 下 : 

<input type= "button" value="..." name="..."> 

其 中 ,value 表示 显示 在 按钮 上 面 的 文字 。 普 通 按钮 经 常 和 脚本 一 起 使 用 。 
2) 提交 按钮 


通过 提交 (input type= submit) 操作 可 以 将 表单 (form) 里 的 信息 发 送 给 表单 里 
action 所 指向 的 文件 。 
格式 如 下 : 


<input type= "submit" value= "提交 "> 
3) 重 置 按钮 


当 type 的 类 型 为 reset 时 ,表示 该 输入 项 输入 的 是 重 置 按钮 。 单 击 该 按钮 后 ,浏览 器 
可 以 清除 表单 中 的 输入 信息 而 恢复 到 默认 的 表单 内 容 设 定 。 
格式 如 下 : 


<input type= "reset" value="..." name="..."> 


5. 单 选 框 和 复 选 框 
1) 单 选 框 
格式 如 下 : 


73 


Web 前 端 开 发 实用 案例 教程 xure RP+ HIML 5+ CSS 3+ Photoshop) 





<input type= "radio"™name="..." value="..." checked> 


主要 参数 说 明 如 下 。 

。 name: 表示 单 选 框 的 名 称 。 如 果 是 一 组 单 选项 ,name 属性 的 值 相同 时 有 互 斥 效果 。 
。 value: 表示 选中 后 传送 到 服务 器 端的 值 。 

。 checked: 表示 此 项 默认 选中 。 

2) 复 选 框 

格式 如 下 : 


<input type= checkbox name="..." value="..."checked > 


主要 参数 说 明 如 下 。 
。 name: 表示 复 选 框 的 名 称 。 如 果 是 一 组 单 选项 ,即使 name 属性 的 值 相同 ,也 不 会 
有 互 斥 效果 。 

。 value: 表示 选中 后 传送 到 服务 器 端的 值 。 

。 checked: 表示 此 项 默认 选中 。 

6. 文件 输入 框 

当 type= "file" 时 ,表示 该 输入 项 是 一 个 文件 输入 框 ,用 户 可 以 在 文件 输入 框 的 内 部 
填写 自己 硬盘 中 的 文件 路 径 , 然 后 通过 表单 上 传 。 

格式 如 下 : 


<input type="file" name="..."> 


7. 下 拉 框 
下 拉 框 (select) 既 可 以 用 作 单 选 , 也 可 以 用 作 复 选 。 
单 选 例句 如 下 : 
<select name= "fruit" > 
<option value= "apple"> 苹 果 
<option value= "orange"> 橘 子 
<option value= "mango"> 芒 果 
</select> 
如 果 要 变 成 复 选 ,加 multiple 即 可 (用 户 用 Ctrl 键 辅助 来 实现 多 选 )。 例 如 ,二 select 
name 一 "fruit”" mnultiple 之 。 用 户 还 可 以 用 size 属性 来 改变 下 拉 框 的 大 小 。 
8. 多 行 输入 框 
多 行 输 入 框 (textarea) 主 要 用 于 输入 较 长 的 文本 信息 。 格 式 如 下 : 


< textarea name= "yoursuggest" cols ="50" rows ="3">< /textarea> 


其 中 ,cols 表示 textarea 的 宽度 ;rows 表示 textarea 的 高 度 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
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件 夹 。 
实例 素材 位 置 :“ 单 元 7 目录 下 的 images 子 目 录 。 
效果 文件 位 置 :“ 单 元 7? 目录 下 的 “ 蜜 淘 全 球 购 网 站 高 保 真 原型 设计 . rp” 和 login. html。 


【任务 实施 】 


1. 用 Axure 软件 制作 仿 绘 制 蜜 淘 全 球 购 网 站 的 登录 页 面 

设计 思路 : 进行 页 面 布局 ,需要 用 到 标签 .矩形 .文本 框 (单行 )、 横 线 、 图 片 动态 面板 
等 控件 ;进行 登录 表单 的 验证 ,需要 用 到 动态 面板 和 条 件 设 置 。 当 用 户 输入 用 户 名 和 密码 
时 ,错误 的 提示 信息 放 在 动态 面板 里 ,根据 不 同 的 条 件 显示 不 同 的 提示 信息 。 如 图 7-1 所 
示 为 登录 界面 。 
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图 7-1 登录 界面 


1) 网 站 登录 界面 的 布局 设计 

(1) 打开 Axure RP 软件 ,将 当前 工程 保存 起 来 ,命名 为 “ 蜜 淘 全 球 购 网 站 高 保 真 原型 
设计 ”, 在 站 点 地 图 中 对 页 面 进 行 重新 命名 ,分 别 为 “登录 ”注册 ”。 

(2) 将 站 点 地 图 的 两 个 页 面 “登录 ”和 “注册 ”都 设置 为 “居中 对 齐 ”, 这 样 在 浏览 器 里 
就 会 居中 对 齐 显示 。 

(3) 拖 动 鼠标 创建 一 个 图 片 控件 ,用 “1- 蜜 淘 banner. png” 图 片 替换 图 片 控件 ,x、y 坐 
标 值 设置 为 (70,1) ;再 拖 动 鼠标 创建 一 个 图 片 控件 ,用 “2- 登 录 左 侧 图 片 . png” 图 片 替换 图 
片 控件 ,x、y 坐标 值 设置 为 (150,94); 拖 动 鼠 标 创建 两 个 矩形 控件 。 效 果 如 图 7-2 所 示 。 

(4) 拖 动 鼠标 创建 两 个 标签 控件 ,文本 内 容 分 别 命名 为 “登录 蜜 淘 “ 还 没 账 号 ?离开 
免费 注册 ”, 并 将 “登录 蜜 淘 ” 字 体 颜 色 设 置 为 红色 (# D83D69), 字 号 设置 为 18 号 字 ; 将 
“还 没 账号 ”离开 免费 注册 ”字体 颜色 设置 为 红色 (#D83D69)。 

(5) 拖 动 鼠标 创建 两 个 矩形 控件 ,宽度 ”设置 为 258,“ 高 度 ” 设 置 为 30, 边 框 宽度 设置 为 
第 二 个 宽度 ,边框 颜色 设置 为 灰色 并 CCCCCC, 如 图 7-3 所 示 , 拖 动 鼠 标 创建 两 个 矩形 控件 。 
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图 7-2 拖 动 鼠标 创建 两 个 矩形 控件 
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图 7-3 隐藏 边框 
76 


单元 7 注册 页 面 一 -Axure 动态 面板 与 表单 在 网 页 中 的 应 用 

(6) 拖 动 鼠标 创建 两 个 图 片 控件 ,用 登录 名 图 标 和 密码 图 标 蔡 换 图 片 控件 ;再 拖 动 鼠 
标 创 建 两 个 文本 框 单行 控件 “宽度 ”设置 为 223,“ 高 度 ” 设 置 为 25, 标 签 分 别 改 为 “账号 ” 
和 “密码 ”。 

(7) 选中 “账号 ”文本 框 ,在 控件 属性 和 样式 区 域 中 设置 提示 文字 为 “请 输入 手机 号 或 
邮箱 ”, 字 体 颜 色 为 灰色 (#999999) ,使 边框 隐藏 起 来 ;再 选中 “密码 ”文本 框 ,在 控件 属性 
和 样式 区 域 中 设置 类 型 为 密码 ,提示 文字 为 “请 输入 密码 ”, 字 体 颜 色 为 灰色 (#999999)， 
将 边框 隐藏 起 来 ,如 图 7-3 所 示 。 

(8) 拖 动 鼠 标 创建 一 个 标签 控件 ,文本 内 容 命名 为 “忘记 密码 ”, 字 体 颜色 为 蓝 色 (# 
3399FF) ;再 拖 动 鼠 标 创 建 一 个 和 矩形 控件 ,填充 为 红色 (#FF3674) ,去 掉 边框 ,文本 内 容 为 
“登录 ”, 字 体 颜色 为 白色 (#FFFFFF) ,字号 为 16 号 字 。 

(9) 拖 动 鼠标 创建 一 个 标签 控件 ,文本 内 容 命 名 为 “第 三 方 登录 ”, 字 体 颜 色 为 灰色 
( 井 999999) ;再 拖 动 鼠标 创建 两 个 图 片 控 件 , 用 “4-qq 账号 登录 . png”5- 用 微 博 登录 . 
png" 图 片 蔡 换 图 片 控件 。 

(10) 拖 动 鼠标 创建 两 个 图 片 控件 ,用 *3- 客 户 端 二 维 码 . png”6- 版 权 信息 . png” 图 片 
替换 图 片 控件 ,版权 信息 如 图 7-4 所 示 。 
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2) 网 站 登录 表单 验证 

(1) 拖 动 鼠标 创建 一 个 动态 面板 控件 并 双击 ,名 称 命名 为 “用 户 名 验证 ”。 新 建 3 种 
状态 :“ 请 填写 账号 “账号 太 短 了 ”请 输入 正确 的 账号 ”。 

(2) 在 这 3 种 状态 里 分 别 添加 文字 内 容 :“ 请 填写 账号 “账号 太 短 了 ”请 输入 正确 的 
账号 ”, 字 体 颜 色 设置 为 红色 (并 D83D69) 。 
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(3) 拖 动 鼠标 创建 一 个 动态 面板 控件 并 双击 ,名 称 命名 为 “密码 验证 ”"。 新 建 一 种 状 
: “密码 应 该 6 一 18 位 ”, 如 图 7-5 所 示 , 拖 动 鼠 标 创 建 一 个 动态 面板 控件 。 
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7-5 拖 动 鼠标 创建 一 个 动态 面板 控件 


(4) 进入 “密码 应 该 6 一 18 位 "状态 ,添加 文字 内 容 “ 密 码 应 该 6 一 18 位 ,字体 颜色 设 
置 为 红色 (# D83D69)。 

(5) 将 “用 户 名 验证 “密码 验证 ”这 两 个 动态 面板 隐藏 起 来 。 选 中 “账号 ”输入 框 , 添 
加 失去 焦点 时 触发 事件 , 当 输 入 框 什么 都 没有 输入 时 ,失去 焦点 会 提示 “请 填写 账号 ”。 

(6) 当 输 入 框 里 文字 长 度 等 于 1 时 ,失去 焦点 会 提示 “账号 太 短 了 ”, 如 图 7-6 所 示 , 动 
态 面板 被 隐藏。 

(7) 当 输 入 框 里 文字 长 度 为 110 时 ,认为 输入 的 账号 不 正确 ,失去 焦点 会 提示 “请 输 
入 正确 的 账号 ”。 

(8) 如 果 不 满足 于 上 面 3 种 情况 ,就 将 “用 户 名 验证 ”这 个 动态 面板 隐藏 起 来 。 

(9) 选中 “密码 "文本 框 ,添加 失去 焦点 时 触发 事件 ,如 果 文本 框 里 的 文字 长 度 小 于 
6 位 或 者 大 于 18 位 ,失去 焦点 时 会 提示 “密码 应 该 6 一 18 位 ”。 如 图 7-7 所 示 为 添加 事件 
的 效果 。 

(10) 如 果 密 码 输 入 正确 ,就 将 “密码 验证 "这 个 动态 面板 隐藏 起 来 。 
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图 7-7 添加 事件 的 效果 





(11) 按 F5 键 发 布 原型 .看 一 下 效果 。 输 入 用 户 名 和 密码 , 当 用 户 名 和 密码 输入 有 问 


上 时 会 出 现 相 应 的 提示 ;如 果 密 码 输入 正确 ,就 将 “密码 验证 ?这 个 动态 面板 隐藏 起 来 。 登 
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录 界 面 并 进行 表单 验证 ,完成 操作 。 

2. 根据 原型 设计 

使 用 Dreamweaver CS 制作 网 页 ,不 添加 “表单 ”对 话 框 的 表单 响应 验证 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打 开 “ 文 件 ”" 面 板 , 在 复制 的 文件 夹 中 创建 一 个 名 为 
ogin. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 对 网 页 进行 整体 布局 划分 ,将 页 面 结构 分 为 标题 部 分 、 表 单 部 分 和 版 权 信息 
部 分 。 








<body> 
<div id= "content"> 
< 上 -标题 部 分 开始 --> 
<div id= "header"> 
< img src= "images/1.png" class= "imgl"> 
</div> 
< !-- 标 题 部 分 结束 - -> 
<div id= "img2"> 
< img src= "images/2.png" class= "img3"> 
</div> 
<!-- 表 单 部 分 开始 --> 
< form action="" id= "form"> 
<div id="int"> 
<lable class="biaoti"> 登 录 蜜 淘 < /lable> 
<lable class= "biaotil">< span class= "biaoti2"> 还 没 账号 ?离开 
</span><span class="biaoti3"><a hre 他 "register.html"> 免 费 注册 < /a> 
</span>< /lable> 
<div class= "username"> 
< img src= "images/10.jpg" class= "imgz"> 
< input type= "text" class= "usernamel"” id= "username"> 
</div> 
<div class= "tishi">< span class= "mess" id= "stuNameMess">< /span>< /div> 
<div class= "password"> 
< img src= "images/11.jpg" class= "imgm"> 
<input type= "password" class= "passwordl" id= "password"> 
</div> 
<div class="tishi">< span class="mess" id="stuPasMess">< /span>< /div> 
<div class="forget"><a href=#"> 忘 记 密 码 < /a>< /div> 
<input type= "submit" value= "登录 " class= "button"> 
<div class="disanfang"> 第 三 方 登录 < /div> 
<div class="loginimg"> 
< img src= "images/4.png"> < img src= "images/5.png" style= 
"width:120px?margin- left:17px;"> 
</div> 
</div> 
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</form> 
< !-- 表 单 部 分 结束 - -> 
<div class="erweima"> < img src= "images/3.png">< /div> 
<div class="]lianjie">< span ><a href= 叶 "> 关于 蜜 淘 < /a> gnbsp; gnbsp; | gnbsp; gnbsp; 
<a href= 叶 "> 联系 我 们 < /a> gnbsp; snbsp; | snbsp; gnbsp; <a href= 
哇 吃 帮助 中 心 </a></span>< /div> 
<!-- 版 权 信 息 部 分 开始 -一 > 
<div class= "footer"> 
<p> Copyright &copy; 2013- 2015 蜜 淘 网 Metao.com All Rights 
Reserved, 京 ICP 备 13049859 号 - 4< /p> 
<p> 北 京 背 签 科 技 有 限 公司 版 权 所 有 < /p> 
</div> 
< !-- 版 权 信息 部 分 结束 -一 > 
</div> 
< /body> 











(4) 从 效果 图 中 可 知 ,文字 及 图 像 整 体 在 页 面 中 有 一 定 的 宽度 并 需要 居中 。 为 此 ,在 
设计 视图 中 ,使 用 CSS 样式 属性 控制 元 素 的 宽度 、 高 度 等 。 

2) 设置 CSS 样式 属性 

(1) 本 例 使 用 链接 样式 表 。 





<link rel="stylesheet" type= "text/css" href= "1ogin.css"> 





(2) 根据 页 面 结构 ,定义 页 面 样式 。 





#content{ 
position: relative; 
width:1007px; 
height:800px; 
margin- left:70px; 
margin- top:1px; 
margin:0 auto; 


} 





(3) 标题 部 分 和 图 片 样式 的 定义 。 





#header{ 
width:1007px; 
height:83px; 

} 

#img2{ 
width:435px; 
height :403px; 
margin- left:80px; 
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.img3{ 
margin:0 auto; 

} 

#int{ 
position: absolute; 
left:510px; 
top:170px; 
width:258px; 
height:306px; 





(4) 表单 部 分 内 容 样式 的 定义 。 








.biaoti{ 
font- size:18px; 
Color:# D83D69; 
font- family:Arial; 
} 
.biaotil{ 
font- size:13px; 
margin- left:20px; 
.biaoti2{ 
Color:# 999999; 
} 
:biaoti3{ 


} 

.biaoti3 af 
Color:#D83D69; 
text- decoration:none; 

} 

.tishi{ 
width:150px; 
height:22px; 

} 

.Usernamel, .password1{ 
width:247px; 
height:25px; 
line- height :px; 
margin- top:15px; 
text- indent :2em; 

} 

.imgz{ 
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Position: absolute; 
top:42px; 
left:4px; 

} 

-imgmf 
position: absolute; 
top:109px; 
left:4px; 

# 

.forget af 
text- decoration:none; 
Color:#3399FF; 
float:right; 
font- size:13px; 
Color:# 3399FF; 
margin- top:20px; 

} 

-button{ 
width:258px; 
height:30px; 
Color:#FFFFFE; 
background- color:# FF3674; 
margin- top:20px; 
border: 0px; 
font- size:16px; 

} 

.disanfang{ 
font- size:13px; 
Color:# 999999; 
margin- top:25px; 

} 

.loginimg{ 
margin- top:5px; 

} 

.erweimal{ 
position: absolute; 
top:210px; 
right:40px; 

4 

.lianjie{ 
text-align:center; 
Color:# 848484; 


margin:40px; 
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.lianjie a{ 
Color:#585858; 
text- decoration:none; 
font- size:8px; 


} 





(5) 版 权 信息 部 分 内 容 样式 的 定义 。 





.footer{ 
text-align:center; 
Color:#a4a4a4; 
font- size:8px; 

} 

.footer pf 
line- height:10px; 








} 





(6) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 
【知识 归纳 】 


表单 有 两 个 重要 的 组 成 部 分 : 一 是 描述 表单 的 HTML 源 代码 ;二 是 用 于 处 理 用 户 在 
表单 域 中 输入 的 信息 的 服务 器 端 应 用 程序 或 客户 端 脚 本 ,如 CGI、ASP 等 。 


任务 72 仿 富 淘 全 球 购 注 册页 面 一 一 
使 用 CSS 控制 表单 





【知识 储备 】 


1. 表单 样式 应 用 

使 用 CSS 改变 表单 的 文字 、 背 景 . 某 些 输入 框 的 样式 等 。CSS 对 表单 标签 的 修饰 大 
致 分 为 4 种 : 字体 样式 的 应 用 ; @ 背 景 颜色 和 图 像样 式 的 应 用 ; 加 修饰 表单 标签 边框 
样式 ; @ 边 框 的 特殊 设计 展示 。 

1) 字体 样式 的 应 用 

字体 样式 包括 字体 (font) 、 字 体 风 格 (font-style) 、 字 体 加 粗 (font-weight)、 字 体 大 小 
(font-size) 等 应 用 。 按 钮 上 文字 是 否 漂亮 ,可 以 通过 CSS 字体 定义 样式 来 解决 ,同样 地 ， 
涉及 文字 的 表单 项 ,文本 框 、 多 行文 本 框 \ 口 令 框 ,下 拉 列 表 框 等 都 可 以 应 用 字体 样式 来 灵 
活 设置 。 
84 


单元 7 注册 页 面 一 -Axure 动态 面板 与 表单 在 网 页 中 的 应 用 





2) 背景 颜色 和 图 像样 式 的 应 用 

网 页 颜色 的 搭配 可 以 通过 表单 的 背景 颜色 和 图 像样 式 进行 设计 ,背景 颜色 利用 
background-color 属性 ,图 像样 式 利 用 background-image 属性 ,颜色 和 图 像 同 样 能 起 到 令 
人 意 想不到 的 效果 。 

3) 修饰 表单 标签 边框 样式 

边框 属性 有 边框 样式 (border-style)、 上 边框 (bordertop) 右边 框 (border-right)、 下 
边框 (border-bottom) ,左边 框 (border-left) ,边框 颜色 (border-color) 边框 宽度 (border- 
width) 、 上 边框 宽度 (border-top-width) 、 右 边框 宽度 (border-right-width)、 下 边框 宽度 
(border-bottom-width) ,左边 框 宽度 (border-left-width) ,边框 (border) 。 

文本 框 有 8 种 类 型 的 边框 样式 。 边 框 宽度 设置 方法 为 


border- width: [thinlmediumlthick< 长 度 >]{1,4} 


边框 宽度 用 1 一 4 个 值 来 设置 。 如 果 4 个 值 都 给 出 了 , 则 它们 分 别 被 应 用 于 上 、 布 、 
下 、 左 ;如 果 只 给 出 一 个 值 , 它 被 应 用 于 所 有 边框 宽度 ;如 果 给 出 2 个 或 3 个 值 , 则 省 略 的 
值 与 对 边 相 等 。 例 如 : 


<input type="text" name="RedF" style="border- color: # 006600; border- style: dotted; 
border- width: lpx"> 


边框 颜色 的 设置 方法 为 
border- colr: < 颜色 > {1,4} 


边框 颜色 用 1 一 4 个 值 来 设置 。 如 果 4 个 值 都 给 出 了 , 则 它们 分 别 被 应 用 于 上 \ 右 、 下 
和 左 ; 如 果 只 给 出 一 个 值 , 它 被 应 用 于 所 有 边框 颜色 ;如 果 给 出 了 2 个 或 3 个 值 , 则 省 略 的 
值 与 对 边 相 等 。 

对 于 多 行文 本 框 以 及 按钮 ,设置 边框 的 方法 和 文本 框 一 样 ;由 于 下 拉 列 表 框 select 不 
支持 边框 的 设置 ,所 以 不 需要 设置 。 

4) 边框 的 特殊 设计 展示 

边框 类 型 的 外 观 有 以 下 设置 。 

。 none: 无 边框 。 与 任何 指定 的 border-width 值 无 关 。 

。 dotted: 点 线 。 

。 dashed: 虚线 。 

。 solid: 实 线 边 框 。 

。 double: 双 线 边框 。 两 条 单线 与 其 间隔 的 和 等 于 指定 的 border-width 值 。 

。 groove: 3D 凹 槽 。 

。 ridge: 边框 突起 。 

。 inset: 3D 四 边 。 
outset: 3D 凸 边 。 
2. 表单 图 像 应 用 
1) 图 像 代替 按钮 
用 图 像 代替 “提交 ”按钮 ,不 加 事件 函数 的 代码 为 二 input type 一 "image”name 一 "..." 
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src 一 "url"” width 一 ""” height 一 "..." border 一 "..." 二 ,属性 和 一 img 二 标签 的 属性 是 一 
样 的 。 

加 上 事件 函数 ,代替 submit 按钮 的 代码 图 片 格式 是 二 input type 一 "image”name 一 ".….” 
src 一 "..." onclick 王 "document. formName. submit() "过 ;代替 reset 按钮 的 代码 图 片 格 


式 是 一 input type 一 "image”name 一 "..."”src 一 "... 
reset()" 盖 。 其 中 ,formName 是 表单 的 name 属性 值 。 

2) 用 背景 图 美化 表单 元 素 

用 background-image:url() 属 性 来 定义 表单 元 素 的 背景 图 。 示 例 代 码 如 下 : 


onclick = " document. formName. 


< INPUT style="BACKGROUND- IMAGE: Url (attachments/month 200502/21_171412 2yq5bg.gif)" 
name= RedBack> 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 7 目录 下 的 images 子 目 录 。 

效果 文件 位 置 :“ 单 元 7” 目 录 下 的 “ 蜜 淘 全 球 购 网 站 高 保 真 原型 设计 . rp” 和 register. 


html。 


【任务 实施 】 


1. 用 Axure 软件 制作 
仿 作 绘 制 蜜 淘 全 球 购 网 站 的 注册 页 面 ,如 图 7-8 所 示 。 





:3 正品 15 天 快速 特 亦 
上 E3 润 METAO.COM 韩国 免税 店 Re 天 和 清关 配送 se 
欢迎 注册 密 淘 主队 ? 合 双 





回 已 岗 污 并 接受 《 酝 海 网 服务 全 元 》 
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网 站 注册 表单 布局 设计 如 下 : 

(1) 进入 “注册 ”页 面 , 拖 动 鼠标 创建 一 个 图 片 控件 ,用 “1- 蜜 淘 banner. png” 图 片 替换 
图 片 控件 ,z、y 坐标 值 设 置 为 (70,1) ;再 拖 动 鼠 标 创建 两 个 标签 控件 ,文本 内 容 分 别 为 “ 欢 
迎 注 册 蜜 淘 ”“ 已 注册 ? 登录 ”, 字 体 分 别 为 18 号 字 、 红 色 (#D83D69)。 

(2) 拖 动 鼠标 创建 5 个 标签 控件 ,文本 内 容 名 为 “手机 号 “验证 码 ”“ 短 信 校 验 码 ”“ 请 
设置 密码 所 请 确认 密码 ” ,颜色 为 灰色 (并 999999) ;再 拖 动 鼠 标 创建 5 个 矩形 控件 ,边框 为 
灰色 (#CCCCCC) ,如 图 7-9 所 示 。 





ET 


DB "Noe 





jos -太吉 | 器 交融 -| 四 -三 = ||! 





Bs B /U3 ll, 
站 上 图 (4) ? 入 | 有 注册 于 人 的 证 /密友 应 流 5-18 位 ( 晤 录 ) * 妈 芭 * 
bed S00 0 700 


ES 

口 二 迎 注册 密 ; 已 注册 ? 
Da 欢迎 注册 密 淘 已 注册 ?登录 
口 ws 
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(3) 拖 动 鼠标 创建 5 个 文本 框 (单行 ) 控 件 , 标 签 命名 为 手机 号 “验证 码 ”“ 短 信 校 验 
码 ”“ 请 设置 密码 “请 确认 密码 ”, 将 边框 都 隐藏 起 来 。 

(4) 拖 动 鼠标 创建 一 个 标签 控件 ,文本 内 容 改 为 “验证 码 ”, 字 体 颜 色 设置 为 红色 
(〈 井 FF1B66); 再 拖 动 鼠标 创建 一 个 图 片 控件 ,用 8- 注册 验 证 码 . jpg” 图 片 蔡 换 图 片 控件 ， 
如 图 7-10 所 示 。 

(5) 拖 动 鼠 标 创建 一 个 矩形 控件 , “宽度 ”设置 为 172,“ 高 度 ” 设 置 为 30, 填 充 为 灰色 
〈 井 A3A3A3) ,文本 内 容 为 “短信 验证 码 ”, 字 体 设置 为 白色 (并 FFFFFF) 。 

(6) 拖 动 鼠 标 创建 一 个 复 选 框 控 件 ,文本 内 容 改 为 “已 阅读 并 接受 ( 蜜 淘 网 服务 条 
款 )" ,其 中 %“《 蜜 淘 网 服务 条 款 )" 字 体 颜 色 设置 为 蓝 色 (并 0000FF) ;再 拖 动 鼠标 创建 一 个 
矩形 控件 “宽度 ”设置 为 322,“ 高 度 ” 设 置 为 30, 填 充 为 红色 (#FF3674) ,文本 内 容 为 “ 注 
册 ”, 字 号 为 16 号 ,字体 颜色 为 白色 (#FFFFFF) ,如 图 7-11 所 示 。 
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2. 根据 原型 设计 使 用 Dreamweaver CS 制作 网 页 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复 制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打 开 * 文 件 ? 面 板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 
register. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 对 网 页 进行 整体 布局 划分 ,将 页 面 结构 分 为 标题 部 分 和 表单 部 分 。 





<body> 
<div id= "content"> 
< !-- 标 题 部 分 开始 -一 > 
<div id= "header"> 
< img src= "images/1.png" class= "imgl"> 
</div> 
< 上 -标题 部 分 结束 --> 
< !-- 表 单 部 分 开始 - -> 
<form> 
<div id="int"> 
<div class= "biaoti"> 欢 迎 注册 蜜 淘 < /div> 
<div id=-"biaotil"><span class="biaoti2"> 已 注册 ? </span>< span class=" 
biaoti3"><a href="]login.html"> 登 录 < /a>< /span>< /div> 
<div class= "phone"> 
<lable> 手 机 号 : < /lable> 


< input type= "text" class= "int"> 
</div> 
<div class= "phone"> 

<lable> 验 证 码 : < /lable> 

<input type= "text" class= "intl"> 

< lable class= "yzm"> 验证 码 < /lable> 
</div> 
< img src= "images/8.jpg" class= "imgyzm"> 
<div class= "phone"> 

<lable> 短 信 校 验 码 : < /lable> 

<input type= "text" class= "intl"> 

< input type= "button" value= "短信 验证 码 " class= "dxyzm"> 
</div> 
<div class= "phone"> 

<lable> 请 设置 密码 : < /lable> 

< input type= "text" class="int"> 
</div> 
<div class="phone"> 

<lable> 请 确认 密码 : < /lable> 

< input type= "text" class= "int"> 
</div> 


<div class= "checkbox"> 
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<input type= "checkbox">< lable>< span class="yuedu"> 已 阅读 并 接受 </ 
span> < span class= "tiaokuan">《 蜜 淘 网 服务 条 款 )< /span> 
</lable> 
</div> 
<input type= "submit" value= "注册" class= "button"> 
</div> 
< /form> 
< !-- 表 单 部 分 结束 - -> 
</div> 
< /body> 











(4) 从 效果 图 中 可 知 , 文 字 及 图 像 整 体 在 页 面 中 有 一 定 的 宽度 并 需要 居中 。 为 此 ,在 
设计 视图 中 ,使 用 CSS 样式 属性 控制 元 素 的 宽度 、 高 度 等 。 

2) 设置 CSS 样式 属性 

(1) 本 例 使 用 链接 样式 表 。 





<link rel= "stylesheet" type= "text/css" href= "1ogin.css"> 





(2) 根据 页 面 结构 ,定义 页 面 样式 。 





#content{ 
width:1007px; 
height:800px; 
margin- left:70px; 
margin- top:1px; 
margin:0 auto; 





(3) 标题 部 分 和 图 片 样式 的 定义 。 





#header{ 
width:1007px; 
height:83px; 

} 

.imgl{ 
margin:0 auto; 

} 

#int{ 
position: relative; 
width:411PX7 
height:384px; 
margin- left:280px; 
margin- top: 90px; 
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(4) 表单 部 分 内 容 样式 的 定义 。 








.biaoti{ 
font- size:18px7 
Color:#D83D69; 
font- family:Arial; 
margin- left:60px; 
margin- top:px; 

， 

#biaotil{ 
margin- left:300px; 
margin- top:- 10px; 
font- size:13px; 
font- family:Arial; 

} 

-biaoti2{ 
Color:# 999999; 

} 

al 
Color:#D83D69; 
text- decoration:none; 

} 

lable{ 
Color:# 999999; 
font- size:13px; 

.Phone{ 
line- height :50px; 

} 

“yzm{ 
Color:#FF1B66; 
margin- left:7px; 

} 

-imgyzm{ 
position: absolute; 
top:85px; 
left:270px; 

} 

.dxyzm{ 
Color:#ffffff; 
background- color:# A3A3A3; 
width:172px; 
height: 30px; 


font- size:13px; 
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-int{ 
width:311px7 
height:25px; 
border:2px solid #cccccc; 
3 
-intl{ 
width:124px7 
height:25px; 
border:2px solid #cccccc; 
} 
.Checkbox{ 
margin- left:80px; 
line- height:60px; 
} 
.yuedu{ 
Color:# 333; 
} 
.tiaokuan{ 
Color:#0000FF; 
} 
.button{ 
width:322px; 
height:30px; 
margin- left:82px; 
Color:#£fffff; 
font- size:16px; 
background- color:# FF3674; 
border:2px solid #cccccc; 
} 











(5) 保存 文件 。 按 Ctrl 十 S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 


成 此 页 面 的 制作 。 


【知识 归纳 】 


表单 元 素 标签 并 非 只 能 书写 在 “二 form 记 过 /form 记 ”标签 对 中 ,任何 一 个 表单 元 素 
标签 都 可 以 脱离 <form 二 标签 而 存在 ,这 一 点 和 二 table 二 系列 的 标签 是 有 区 别 的 。 

在 表单 使 用 过 程 中 需要 控制 表单 样式 ,如 表单 控件 长 度 ,显示 样式 ,提醒 背景 色 ， 
甚至 整个 表单 的 字体 和 统一 样式 等 ,这 些 其 实 都 可 以 通过 CSS 来 实现 ,使 表单 看 起 来 


更 漂亮 。 
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任务 拓展 


设计 制作 留言 簿 信息 输入 页 面 ,如 图 7-12 所 示 。 











先生 
请 输入 你 所 在 的 省 








































































































7-12 留言 短信 息 输入 页 面 
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单元 8 电影 音乐 网 一 一 页 面 中 插入 
视频 音频、 动画 


随 着 多 媒体 技术 的 发 展 ,原先 单一 的 图 片 文字 网 页 内 容 发 展 为 多 种 媒体 集合 的 表现 
形式 。 在 网 页 中 应 用 多 媒体 技术 ,如 视频 ,音频 Flash 动画 等 内 容 , 可 以 增强 网 页 的 表现 
效果 ,使 网 页 更 生动 ,激发 访问 者 的 兴趣 。 

教学 目标 : 

。 掌握 网 页 视频 ,音频 动画 的 标签 元 素 的 使 用 方法 。 

。 掌握 浏览 器 对 视频 文件 和 音频 文件 动画 的 使 用 方法 。 

e 掌握 播放 控件 的 正确 使 用 方法 


任务 8-1 微 视频 网 页 展播 一 -视频 播放 页 面 


【知识 储备 】 


目前 ,国内 外 网 站 提供 的 视频 内 容 可 谓 是 各 有 千秋 。 视 频 播放 器 是 一 种 用 于 播放 各 
种 视频 文件 的 多 媒体 播放 软件 。 常 见 的 视频 格式 有 wmv ,avi mpg ,rmvb 等 。Flash 视频 是 
一 种 新 的 流 媒 体 视频 格式 ,其 文件 扩展 名 为 “. flv”。Flash 视频 文件 极 小 、 加 载 速 度 极 快 ， 
它 的 出 现 有 效 地 解决 了 视频 文件 导入 Flash 后 ,使 导出 的 SWF 文件 体积 庞大 ,不 能 在 网 络 
上 很 好 地 使 用 等 缺点 ,使 网 络 上 观看 视频 文件 更 为 便利 。 

使 用 < video > 标签 来 定义 视频 播放 器 ,实现 了 包括 播放 暂停 .进度 和 音量 控制 .全 
屏 等 功能 ,更 重要 的 是 可 以 自 定义 这 些 功能 和 控制 栏 的 样式 

视频 可 以 理解 为 一 系列 连续 的 图 片 , < video > 标签 的 使 用 方法 与 < img > 标签 非常 
相似 ,语法 如 下 : 

<video src 一 "视频 文件 路 径 " controls ></video > 


其 中 ,src 属性 用 于 设置 视频 文件 的 路 径 ,也 可 以 为 该 标签 设置 with 和 height 的 值 ; 
controls 属性 用 于 为 视频 提供 播放 控件 。src 和 controls 是 < video > 标签 的 基本 属性 。 
<video > 标签 支持 3 种 视频 格式 ,具体 如 下 。 
(1) ogg: 带 有 theora 视频 编码 和 vorbis 音频 编码 的 ogg 文件 。 
(2) mpeg4: 带 有 H.264 视频 编码 和 AAC 音频 编码 的 mpeg4 文件 。 
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(3) webm: 带 有 VP8 视频 编码 和 vorbis 音频 编码 的 webm 文件 。 
<video > 标签 用 于 控制 视频 播放 的 常用 属性 见 表 8-1 。 
表 8-1 <video > 标签 用 于 控制 视频 播放 的 常用 属性 

属性 | 取 值 取 值 说 明 
autoplay | autoplay | 如 果 出 现 该 属性 , 则 视频 在 就 绪 后 马上 播放 
controls ”| controls | 如 果 出 现 该 属性 , 则 向 用 户 显示 控件 ,比如 播放 按钮 
height pixels 设置 视频 播放 器 的 高 度 
loop loop 如 果 出 现 该 属性 , 则 当 媒 体 文件 播放 完 后 再 次 开始 播放 
如 果 出 现 该 属性 , 则 视频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 。 如 果 使 用 
"autoplay" , 则 忽略 该 属性 
要 播放 的 视频 的 URL 
设置 视频 播放 器 的 宽度 

















preload | preload 





sre url 











width pixels 


因 版 权 原因 ,浏览 器 要 支持 相应 的 视频 格式 ,需要 向 该 视频 格式 的 开发 者 购买 使 用 资 
格 , 因 此 并 不 是 所 有 浏览 器 对 所 有 的 视频 格式 都 支持 。 常 用 浏览 器 对 视频 文件 的 支持 见 
表 8-2。 
表 8-2 常用 浏览 器 对 视频 文件 的 支持 











浏览 器 及 平台 支持 的 视频 格式 浏览 器 及 平台 支持 的 视频 格式 
Chrome MP4 .Webm .ogg Android MP4 
Firefox MP4 .Webm i0S MP4 
JInternet Explorer MP4 Safari MP4 














【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文件 夹 。 
实例 素材 位 置 :“ 单 元 8" 目 录 下 的 video 子 目录 。 
效果 文件 位 置 :“ 单 元 8" 目 录 下 的 video-1. html。 


【任务 实施 】 


微 视频 网 页 制作 分 为 构建 HTML 结构 和 设置 CSS 样式 属性 两 部 分 来 进行 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS ,打开 "文件 " 面 板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 video- 

1. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 添加 图 片 。 

(4) 添加 视频 。 

(5) 添加 播放 器 按钮 。 

(6) 使 用 JavaScript 定义 了 一 个 控制 播放 或 者 暂停 的 按钮 ,使 用 onclick 事件 定义 方 
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法 。 代 码 如 下 : 








<body > 
<div id="vd"> 
<video id ="myVideo" width ="630" > 
<! 一 - 淹 断 是 否 支 持 其 播放 器 --> 
<source src ~"myVideo.o0ogg" type ="video/o0gg"/ > 
<source src ='myVideo.webm" type ="'video/webm"/ > 
<source src "myVideo .mp4" type ="'video/mp4"/ > 
您 的 浏览 器 不 支持 <video 注 签 
</video > 
<br/ > 
<button id "playPause" onclick ="playPause () ;> 播放 </button > 
<button onclick "goBack (5);" > 快 进 5 秒 </button > 
<button onclick "goBack (5);" > 决 退 5 秒 </button > 
<button onclick ="volume (0.1) ;> 音量 + </button > 
<button onclick "volume ( 0.1);" 漳 量 -</pbutton> 
<button id "isMuted" onclick ="isMuted();" 姜 音 </button > 
</div> 
</body > 
<script type ="text/javascript" src ="js/video.js" charset —"gbk" ></script > 











(7) 保存 文件 。 按 Ctrl +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 

2) 设置 CSS 样式 属性 

(1) 设置 CSS 样式 属性 整体 页 面 中 文字 元 素 代 码 ,使 用 外 部 样式 表 。 





<Link rel ="stylesheet" type ="text/css" href ="css/video.css"/> 








代码 如 下 : 
button { 
display: inline block; /* 强制 转换 为 行内 块 级 元 素 * / 
outline: none; /* 该 元 素 获 得 焦点 时 ,不 出 现 虚线 框 (或 高 亮 框 ) * / 
cursor: pointer; /* 鼠标 光标 悬 停 时 变 为 "小 手 "* / 


text -align: center; 

text -Gecoration: none; 

/* 字 体 样式 : 字体 大 小 为 14px, 行 高 为 100%; 字 体 名 称 * / 

font: 14px/100%Arial, Helvetica, sans -serif; 

pagding: 0.5em 2em 0.55em; 。”/* 顶部 内 边 距 为 0.5em 左 右 内 边 距 为 2em、 底 部 内 边 距 
为 0.55em*/ 

text -shadow: 0 lpx lpx rgba (0,0,0,0.3);  /* 文 本 阴影 */ 

-webkit -border -radius: 0.5em; 

-moz -border -radius: 0.5em; 

border -radius: 0.5em; /* 边 框 圆 角 * / 

background -color: #44bc8; 
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color: white; 
} 
button:hover { /* 设置 所 有 按钮 的 鼠标 光标 悬 停 效 果 * / 
text -decoration: none; /* 清除 文本 样式 * / 
df 
margin:0 auto; 
background -image: url (../images/a.png); 
width:700px; 
height :450px; 
Padding -top:120px; 
Padding -left :40px; 
} 











(2) 保存 文件 。 按 Cul + S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 ,如 图 8-1 所 示 为 页 面 预 览 效果 。 





播放 











图 8-1 页 面 预览 效果 (1) 


【知识 归纳 】 
媒体 文件 类 型 video 代表 视频 。 在 < video > 标签 中 添加 controls 属性 ,用 于 设置 或 返 
回 浏览 器 应 当 显示 标准 的 音频 空间 。 单 击 * 播 放 "按钮 ,视频 开始 播放 ,如 图 8-2 所 示 为 视 
频 开 始 播放 的 效果 。 
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图 8-2 视频 开始 播放 的 效果 


1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打 开 *“ 文 件 "面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 video- 
2. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 添加 视频 。 代 码 如 下 : 








<video src =myVideo.mp4"” controls > 您 的 浏览 器 不 支持 <video > 标签 </video > 








(4) 保存 文件 。 按 Ctrl + S 快捷 键 保存 网 页 ,然后 按 Fl12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 

2) 设置 CSS 样式 属性 

(1) 页 面 中 引入 CSS 样式 的 属性 方法 。 在 ”< head > </head > ”标签 对 之 间 输 入 以 
下 代码 。 





<style type ="text/css" > 
<!-- 
--!> 

</style > 





(2) 设置 CSS 样式 的 属性 ,整体 页 面 中 文字 元 素 的 代码 如 下 : 





body { 
background -image: url (images/b.png); 
background -repeat: no -repeat; 
margin -top: 150px; 
margin -left: 170px; 

} 











(3) 保存 文件 。 按 Cul +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 
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任务 8-2 婉约 配乐 页 面 一 页面 中 播放 音乐 


【知识 储备 】 


在 网 页 中 添加 声音 有 两 种 方式 ,一 种 是 以 插入 音频 的 形式 ,通过 播放 器 控制 音频 ; 另 
一 种 是 以 添加 背景 音乐 的 形式 ,在 加 载 页 面 时 自动 播放 音频 。 

1. 插入 背景 音乐 

使 用 <bgsound > 元 素 可 插 和 背景 音乐 ,只 适用 于 正 。 

格式 如 下 : 


<bgsound src ="url 音乐 路 径 " autostart 十 rue loop =infinite > 


主要 参数 说 明 如 下 。 

e src ="url 音乐 路 径 " : 表示 设 定 midi 档案 及 路 径 ,可 以 是 相对 路 径 或 绝对 路 径 。 

e autostart = true: 表示 在 音乐 档 下 载 完 之 后 就 自动 播放 。true 为 是 ,false 为 否 (内 

定 值 ) 。 

eloop =infinite: 表示 自动 反复 播放 。loop =2 表示 重复 两 次 ,infinite 表示 重复 多 次 。 

2. 插入 音频 

使 用 <embed > 元素 标签 插入 音频 。 < embed > 用 来 插入 各 种 多 媒体 ,格式 可 以 是 
midi ,wav .aiff au 等 ,netscape 及 新 版 的 下 都 支持 。 


格式 如 下 : 

<embed src =" url 音乐 路 径 " autostart ="true" loop "true" hidden "true" > 
1) 自动 播放 

格式 如 下 : 


autostart true, false 


说 明 : 该 属性 规定 音频 或 视频 文件 是 否 在 下 载 完 之 后 自动 播放 。 其 主要 参数 说 明 
如 下 。 

。 true: 音乐 文件 在 下 载 完 之 后 自动 播放 。 

。 false: 音乐 文件 在 下 载 完 之 后 不 自动 播放 。 

示例 : 





<embed src ="your .mid" autostart true> 
<embed src ="your .mid" autostart =false > 


2) 循环 播放 
格式 如 下 : 


loop =- 正 整 数 ,true false 
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说 明 : 该 属性 规定 音频 或 视频 文件 是 否 循环 及 循环 次 数 。 其 主要 参数 说 明 如 下 。 
。 属性 值 为 正 整 数值 时 ,音频 或 视频 文件 的 循环 次 数 与 正 整数 值 相同 。 
。 属性 值 为 rue 时 ,音频 或 视频 文件 循环 。 
。 属性 值 为 false 时 ,音频 或 视频 文件 不 循环 。 
示例 : 





<embed src ="your .mid" autostart true loop2 > 
<embed src ="your .mid" autostart 二 True loop true> 
<embed src ="your .mid" autostart true loop =false > 


3) 面板 显示 
格式 如 下 : 


hidden true, false 


说 明 : 该 属性 规定 控制 面板 是 否 显示 ,默认 值 为 false。 其 主要 参数 说 明 如 下 。 
。 true; 隐藏 面板 。 

e false: 显示 面板 。 

示例 : 

<embed src ="your .mid" hidden ="true" > 

<embed src ="your .mid" hidden ="no" > 

4) 开始 时 间 

格式 如 下 : 

starttime xm:ss (分 : 秒 ) 

说 明 : 该 属性 规定 音频 或 视频 文件 开始 播放 的 时 间 ,未 定义 则 从 文件 开头 播放 。 
示例 : 

<embed src ="your .mid" starttime ="00:10" > 

5) 音量 大 小 

格式 如 下 : 


volume -0 局 00 的 整数 

说 明 : 该 属性 规定 音频 或 视频 文件 的 音量 大 小 ,未 定义 则 使 用 系统 本 身 的 设 定 。 

示例 : 

<enbed src=your.mid" volume ="10"> 

6) 容器 属性 

格式 如 下 : 

height -idth -二 

说 明 : 取 值 为 正 整数 或 百分数 ,单位 为 像素 ,该 属性 规定 控制 面板 的 高 度 和 宽度 。 其 
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主要 参数 说 明 如 下 。 
e height: 控制 面板 的 高 度 。 
。 width: 控制 面板 的 宽度 。 
示例 : 


<embed src ="your .mid" height 200 width 200 > 


7) 容器 单位 
格式 如 下 : 


units -pixels .en 

说 明 : 该 属性 规定 高 和 宽 的 单位 为 pixels 或 en。 

示例 : 

<embed src ="your .mid" units ="pixels" height 之 00 width 之 00 > 
<embed src ="your .mid" units ="en" height 之 00 width 之 00 > 

8) 外 观 设置 

格式 如 下 : 


controls =console smallconsole .playbutton .pausebutton stopbutton.volumelever 


说 明 : 该 属性 规定 控制 面板 的 外 观 ,默认 值 是 console。 其 主要 参数 说 明 如 下 。 
e console: 一 般 的 正常 面板 。 

se smallconsole: 较 小 的 面板 。 

。 playbutton: 只 显示 “播放 "按钮 。 

。 pausebutton: 只 显示 “暂停 "按钮 。 

® stopbutton: 只 显示 “停止 "按钮 。 

e volumelever: 只 显示 “音量 调节 ”按钮 。 
示例 : 

<embed src ="your .mid" controls =smallconsole > 
<embed src ="your .mid" controls =volumelever > 
9) 对 象 名 称 

格式 如 下 : 


mame -二 

说 明 : # 为 对 象 的 名 称 。 该 属性 给 对 象 取 名 ,以便 其 他 对 象 利用 。 
示例 : 

<embed src ="your .mid" name 一 soundl" > 

10) 说 明文 字 

格式 如 下 : 


title4 
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说 明 : # 为 说 明 的 文字 。 该 属性 规定 音频 或 视频 文件 的 说 明文 字 。 
示例 : 


<embed src "your .mid" title "第 一 首 歌 "> 


11) 前 景色 和 背景 色 
格式 如 下 : 


palette =color |color 


说 明 : 该 属性 表示 和 伦 入 的 音频 或 视频 文件 的 前 景色 和 背景 色 , 第 一 个 值 为 前 景色 ,第 
二 个 值 为 背景 色 , 中 间 用 | 隔 开 。color 可 以 是 RGB 色 , 也 可 以 是 颜色 名 ,还 可 以 是 
transparent( 透明 ) 。 

示例 : 


<embed src ="your .mid" palette ="red lblack" > 


12) 对 齐 方 式 
格式 如 下 : 


aliqn top,\bottom,center baseline, left right texttop .miGdle absmidqle absbottom 


说 明 ; 该 属性 规定 控制 面板 和 当前 行 中 的 对 象 的 对 齐 方式 。 其 主要 参数 说 明 如 下 。 
。 top: 控制 面板 的 顶部 与 当前 行 中 的 最 高 对 象 的 项 部 对 齐 。 

。 bottom: 控制 面板 的 底部 与 当前 行 中 的 对 象 的 基线 对 齐 。 

® center: 控制 面板 居中 。 

。 baseline: 控制 面板 的 底部 与 文本 的 基线 对 齐 。 

。 left; 控制 面板 居 左 。 

。 right: 控制 面板 居 右 。 

e texttop: 控制 面板 的 顶部 与 当前 行 中 的 最 高 的 文字 项 部 对 齐 。 
。 middle: 控制 面板 的 中 间 与 当前 行 的 基线 对 齐 。 

。 absmiddle: 控制 面板 的 中 间 与 当前 文本 或 对 象 的 中 间 对 齐 。 
。 absbottom: 控制 面板 的 底部 与 文字 的 底部 对 齐 。 

示例 : 


<embed src ="your.mid" align top> 
<embed src ="your .mid" align =center > 


【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 8" 目 录 下 的 audio 子 目 录 。 
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效果 文件 位 置 :“ 单 元 8" 目 录 下 的 audiol. html 和 audio2. html。 


【任务 实施 】 


网 页 中 播放 音频 使 用 < audio > 标签 来 定义 ,下 面 将 呈现 电影 插曲 音乐 的 制作 方法 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打开 * 文 件 " 面 板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 
audiol. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 添加 图 片 。 

(4) 添加 音乐 。 添 加 音乐 的 代码 如 下 : 





<div class ="img" ></div > 
<audio src ="ml .mp3" controls ="controls" ></audio > 











(5) 保存 文件 。 按 Ctrl +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 ,如 图 8-3 所 示 。 


[< 一 Ai /1 四 一 
Transitional//EN" E 齐 宫 麻花 证 - 询 H 
"htrp://www.W3.0rg/TR/Xxhtml1/DTD/xhcmll-cranaitional.dtd"> 1 
[<html xmlns="http://www.w3.org/1999/xhtml™> FE 
chead> EF > 
<meta http-equiv="Content-Type" content="text/html; : 
charset=utf-8" /> 
|<title> 音 乐 播放 器 </title> 
<atyle> 
.imgt : 
margin-left:20px; EF $ g 
四 
更 





background-image:url (music2.png); 
Widows:262px; 
height:264px; 
background-repeat:no-repeat; 
} 

</style> 1 

</head> 2 WO 


<body> 
<div class="img"></div> 
<audio src="ml.mp3" controls="controlsa"> </audio> 


</body> 
[</html> 











图 8-3 插入 音乐 播放 器 


2) 设置 CSS 样式 属性 
(1) 页 面 中 引入 CSS 样式 的 属性 方法 。 在 ”< head > </head > "标签 对 之 间 输入 以 
下 代码 。 





<style type ="text/css" > 
> 
= 


</style> 
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(2) 设置 CSS 样式 属性 页 面 中 图 片 元 素 的 代码 。 





-imgf{ 
margin -left:20px; 
background -image:url (music2 .png); 
widows:262px; 
height :264px; 
background -repeat :no -repeat; 
} 





(3) 保存 文件 。 按 Cul +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 ,如 图 84 所 示 。 





Da 
2016.10.28 





图 84 页面 预览 效果 (2) 


【知识 归纳 】 


网 页 中 的 背景 音效 使 用 < bgsound > 标签 来 定义 。 下 面 将 呈现 诗歌 背景 音乐 的 制作 
方法 ,在 下 浏览 器 下 测试 播放 效果 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目 录 中 。 

(2) 启动 Dreamweaver CS, 打开“ 文件 "面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 
audio2. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 添加 文字 和 图 片 。 添 加 文字 和 图 片 的 代码 如 下 : 





<div class 一 "wen" > 
<img src 2"bgl .png" width ="498" height ="499"/ > 
<p ><br/ > 
北 岛 一 一 五 色 花 zor/> 
<br/ > 
在 深渊 的 边缘 上 , <or/ > 
你 守护 我 每 一 个 孤独 的 梦 sbr/ > 
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<br/ > 


<br/ > 


</div> 


太阳 在 远方 白白 地 燃烧 ,<br/ > 
你 在 水 洼 劳 , 投 进 自己 的 影子 sbr/ > 
微波 荡 荡 ,沉淀 了 昨日 的 时 光 。 <br/ > 


假如 有 一 天 你 也 不 免 调 残 ，<br/ > 
我 只 有 个 简单 的 希望 : <br/ > 
保持 着 初 放 时 的 安详 。 </p > 


一 一 那 风 啊 吹 动 草 叶 的 喧 响 。 <br/ > 





(4) 添加 音乐 。 添 加 音乐 的 代码 如 下 : 








<bgsound src 2"music.mp3" autostart true loop =" 1"/> 








(5) 保存 文件 。 按 Cul + S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 


成 此 页 面 的 制作 ,如 图 8-5 所 示 。 





I 
et hep-equiv="CenceasType” contence"test/hral; 
marsermot te /> 
caeo 有 向 可 乐 cricley 
acyle> 
‘margin:0 aucoz 

10px 


wnl 
font-fendly: -全 改革 村 
font-sise:16px; 
color: $0cT» 
font-veight: bold; 
Wide 498p 
Vere-align: center 
1 
may 1 
-tmagez urlfa02.dp9) 
[ 
/style> 
ceaa> 
[body> 
[epgsound srcw"maic. mp3" auroarartreroe looprr-lr /> 
caiv class="wen"> 
[eing arerrbgl.png” wideh=n43e heighee"499" /> 


[poe /> 
北 品 一 一 五 外 花 coe /> 





你 也 不 免 负 距 ， <bz /> 
我 只 有 个 简单 的 祖 望 : <bz /> 
cyP> 





2) 设置 CSS 样式 属性 





图 8-5 





背景 音乐 





号 进 自己 的 影子 
,沉淀 了 诈 日 的 时 光 . 





假如 有 一 天 你 也 不 免 泣 三 


(1) 页 面 中 引入 CSS 样式 的 属性 方法 。 在 "< head > </head > "标签 对 之 间 输 入 以 


下 代码 。 
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<style type ="text/css"> 
< 
= > 


</style> 











(2) 设置 CSS 样式 属性 页 面 元 素 的 代码 。 





-wen{ 
font -family:" 微 软 雅 黑 "; 
font -size:16px; 
Color: 相 CEF7 
font -weight :bold; 
width:498px; 
text -align:center; 
} 
body { 
background -image: url (a02 .jpg); 
} 
</style> 











(3) 保存 文件 。 按 Cul +S 快捷 键 保 存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 ,如 图 8-6 所 示 。 














图 8-6 页 面 预览 效果 (3) 
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任务 8-3 动画 网 页 一 一 页 面 中 插入 动画 


【知识 储备 】 


Flash 是 网 上 流行 的 矢量 动画 技术 , 近 几 年 很 多 站 点 都 采用 了 Flash 技术 ,把 传统 网 页 
无 法 做 到 的 效果 准确 地 表现 出 来 ,增强 了 网 页 的 吸引 力 , 如 使 用 Flash 制作 的 导航 条 、 按 
钮 则 动感 十 足 。Dreamweaver 中 提供 的 Flash 元 素 主 要 包括 Flash 动画 \FlashPaper .Flash 
视频 ,以 及 内 建 的 Flash 按钮 和 Flash 文本 。 

Flash 动画 中 的 元 素 都 是 矢量 的 ,可 以 随意 放大 ， psi 此 外 ,Flash 
动画 文件 较 小 ,适合 在 网 络 上 使 用 。Flash 动画 的 扩展 名 为 *.s 

网 页 中 插入 Flash 的 3 种 方法 ,分 别 说 明 如 下 。 

1. 插入 object 元 素 标签 

通过 可 视 化 界面 ,在 “插入 "下 拉 菜 单 选项 中 选择 媒体”, 继 续 选 择 SWF 文件 ,找到 
要 插入 的 SWF 文件 ,然后 确认 ,如 图 8-7 所 示 。 




















I 0 HO A 
人 | 
ETTECTE Ee 
上 er ， 

ao 
Tr ea Cae 
| a " 
m anOm 
学 mm 
苔 
昌 了 
人 IN Glen 
四 到 
人 mr 

Emo 
[el 
证 二 wa 
加 一 一 
= rc 
去 ent- 
局 Se 
conen tdarol 
辣 mane 
a rome. 

FEF 
过 
四 
站 
= - [UO ms re 1 et we) 
E33 
[Cm] Wn 和 CTT7Z 站 
Be mm 上 E -9 Bm 

Gwe 

















图 8-7 插入 动画 (1) 


输入 标题 后 再 确认 ,如 图 8-8 所 示 。 
在 可 视 化 界面 中 完成 动画 的 插入 , 见 图 8-9。 


107 


Web 前 端 开 发 实用 案例 教程 Axure RP +HIM 5 +CSS 3 +Photoshop) 





标题 :| 设置 标题 | 


| 访问 键 。 Tab 键 来 引 


如 果 在 插入 对 象 时 不 想 输 入 此 信息 ， 请 
更 改 "辅助 功能 "首选 参数。 





8-8 “对 象 标签 辅助 功能 属性 "对 话 框 














8-9 插入 动画 (2) 


2. embed 方式 

将 代码 中 object 的 部 分 去 掉 , 仅 保留 <embed > 标签 ,Flash 也 可 正常 显示 。 这 种 方式 
在 还 和 Firefox 下 浏览 均 很 正常 。 

3. SWFObject 方式 

这 是 一 个 第 三 方 控件 ,可 以 到 SWFObject 官方 下 载 : http://code. google. com/p/ 
swfobject 。 

解压 之 后 ,把 其 中 的 swfobject. js 和 expressInstall. swf 两 个 文件 复制 到 一 个 文件 夹 中 。 
在 “<head > </head > "标签 对 中 插入 。 语 法 格式 如 下 : 


<script language ="javascript" src ="js/jquery.js" ></script > 

在 需要 显示 Flash 的 地 方 插入 ,Flash 将 显示 在 < div > 标签 中 。 也 可 以 在 < div > 标签 
中 插入 文字 或 图 片 ,有 利于 搜索 引擎 收录 , 且 不 影响 Flash 的 显示 。 
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【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 8" 目录 下 的 flash 子 目录 。 

效果 文件 位 置 :“ 单 元 8" 目 录 下 的 02. html。 


【任务 实施 】 


在 网 页 中 插入 动画 ,采用 第 一 种 方法 (object 元 素 标签 ) 。 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打 开 “ 文 件 " 面 板 , 在 复制 的 文件 夹 中 创建 一 个 名 为 02. 
html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 在 “插入 "菜单 中 选择 “媒体 "一 SWF 命令 ,插入 动画 。 

(4) 保存 文件 。 按 Cul +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 ,如 图 8-10 所 示 。 


ER) DAMYy Web\WA/\ Aesh\ge m02 hm 
a 机 











图 8-10 页 面 预览 效果 (4) 


【知识 归纳 】 


SWFObject 2 提供 两 种 不 同 的 方法 来 嵌入 Flash Player 的 内 容 : 静态 发 布 的 方法 用 标 
准 的 标记 咎 入 Flash 内 容 和 替代 元 素 ,并 使 用 JavaScript 来 解决 那些 单独 用 标记 无 法 解决 
的 问题 。 动 态 发 布 的 方法 是 基于 标记 的 替代 内 容 , 通 过 JavaScript 用 Flash 来 替代 内 容 , 前 
提 是 当前 Flash 版 本 和 JavaScript 支持 。 

静态 发 布 的 优势 : 促进 实际 制作 符合 标准 的 标记 ;最 佳 嵌 入 性 能 ;嵌入 Flash 内 容 的 
机 制 ,不 依赖 于 脚本 语言 ,所 以 Flash 内 容 可 以 被 更 多 的 人 看 到 ,兼容 性 更 好 ;如 果 安 装 了 
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Flash 插件 ,但 已 禁用 JavaSceript 或 使 用 的 浏览 器 不 支持 JavaScript, 则 仍然 能 够 看 到 你 的 
Flash 内 容 。Flash 可 以 运行 在 对 JavaScript 支持 非常 糟糕 的 设备 上 ,比如 SONY 的 psp。 

动态 发 布 的 优势 : 与 脚本 的 应 用 程序 很 好 地 集成 在 一 起 , 能够 使 用 动态 变量 
Flashvars ,避免 激活 内 容 在 正 6/7 和 Opera 9 中 被 触发 执行 。 注 意 ,微软 已 经 淘汰 了 其 还 
浏览 器 最 活跃 的 内 容 。 


任务 拓展 


音乐 播放 器 是 一 种 用 于 播放 各 种 音频 文件 的 多 媒体 播放 软件 ,从 音乐 播放 器 的 效果 
可 以 看 出 ,页 面 由 背景 图 ,信息 区 域 . 歌 词 区 域 等 构成 ,页 面 样式 通过 DIV + CSS 进行 整体 
控制 ,页面 生动 形象 。 请 完成 音乐 版 播放 器 页 面 的 制作 。 
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单元 9 ”旅游 景点 网 站 一 一 Axure 低 保 真 
原型 设计 与 CSS 模型 结构 的 
标准 文档 流 


通过 Axure 制作 低 保 真 原型 ,确定 需求 功能 ,避免 因 客户 需求 变动 而 返工 。 制 作 效 果 
是 没有 设计 好 的 界面 和 功能 模块 ,有 的 只 是 一 份 需求 。 应 理解 这 份 需求 的 原型 设计 ,分析 
网 页 的 各 个 功能 模块 来 进行 原型 设计 。 在 现实 情况 下 ,应 根据 原型 设计 的 经 验 以 及 对 说 
明 书 的 理解 来 进行 设计 

网 页 布局 中 CSS 是 核心 ,应 利用 CSS 来 控制 HTML 元 素 的 位 置 和 大 小 等 。 网 页 布局 中 
最 基本 的 布局 方式 是 标准 文档 流 布局 ,决定 了 网 页 元 素 的 默认 位 置 和 显示 方式 。 另 外 ,通过 
旅游 网 站 的 网 页 布局 ,学习 网 页 布局 的 基础 知识 ,理解 盒子 模型 和 标准 文档 流 的 概念 。 

教学 目标 : 

® 利用 Axure 软件 制作 旅游 网 页 低 保 真 原型 。 

。 掌握 念 子 模型 的 概念 。 

。 掌握 网 页 设置 元 素 边框 .边界 填充 和 宽度 等 控制 大 小 和 间距 的 CSS 属性 。 


任务 9-1 旅游 页 面 页 头 部 分 一 盒子 模型 


【知识 储备 】 


盒子 模型 是 CSS 中 较为 重要 的 核心 概念 之 一 ,使 用 CSS 可 以 控制 页 面 元 素 外 观 和 位 
置 。 只 有 充分 理解 了 盒子 模型 概念 ,才能 进一步 掌握 CSS 的 正确 使 用 方法 。 那 么 ,什么 
是 盒子 模型 呢 ? 

HTML 中 的 大 多 数 元 素 都 可 以 看 作 一 个 盒子 ,网 页 元 素 的 定位 实际 是 大 大 小 小 的 盒 
子 在 页 面 中 的 定位 。 网 页 布局 就 是 如 何在 页 面 中 摆 放 ,和 嵌 套 这 些 盒子 的 问题 。 应 了 解 盒 
子 尺 十 计算 ,是否 流动 等 要 素 

一 个 标准 的 W3C 盒子 模型 由 content( 内 容 ) ,padding( 填充 ,也 称 内 边 距 ) ,border( 边 
框 ) 和 margin( 外 边 距 )4 个 属性 组 成 ,如 图 9-1 所 示 

content 表示 盒子 里 装 的 东西 ,使 用 width 和 height 属性 为 盒子 设置 宽度 与 高 度 时 , 实 
际 上 设置 的 是 content 的 宽度 和 高 度 , 不 是 盒子 的 实际 大 小 ;border 表示 盒子 的 边框 , 它 具 
有 border-style( 边框 线 型 ) border-width( 边框 宽度 ) 和 border-color( 边框 颜色 ) 属性 ; 
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margin-top 








border-top 





padding-top 


margin-right 


padding-bottom 


border-bottom 


margin-bottom 











width 


图 9-1 标准 盒子 模型 示意 图 


padding 是 content 与 border 之 间 的 距离 ;margin 是 盒子 与 其 他 盒子 之 间 的 距离 
与 标准 W3C 盒子 模型 不 同 的 是 , 正 盒子 模型 的 width 和 height 部 分 包含 了 border 和 

padding。 当 content 超出 盒子 设 定 的 width 和 height 时 ,盒子 会 随 着 content 的 内 容 变 大 。 
在 不 考虑 content 内 容 超出 设 定 的 width 和 height 的 情况 下 ,IE 盒子 本 身 的 大 小 就 是 为 盒 
子 的 width 和 height 设 定 的 值 ,border 和 padding 包含 在 里 面 

在 网 页 设计 中 ,content 常 指 文字 、 图 像 等 元 素 ,也 可 以 是 < div > 标签 中 的 租 套 。 
content 不 受 盒子 其 他 音 分 的 约束 ,天 是 独立 的 , 当 content 超出 盒子 设 定 的 width 和 height 
时 ,盒子 的 其 他 部 分 不 受 影响 ,只 是 content 会 溢出 盒子 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文件 夹 。 
实例 素材 位 置 :“ 单 元 9" 目 录 下 的 images 子 目录 
效果 文件 位 置 :“ 单 元 9" 目 录 下 的 “旅游 . rp” 和 travel. html。 


【任务 实施 】 

下 面 先进 行 低 保 真 原型 设计 ,再 进行 网 页 模块 设计 

1. 用 Axure 软件 制作 低 保 真 原型 页 面 的 效果 

旅游 网 站 原型 设计 ,按照 需要 分 析 , 功 能 模块 可 划分 为 页 头 的 动画 模块 ,主体 内 容 模 
块 ,页 尾 的 版 权 模块 。 主 体内 容 包括 旅游 景点 和 旅游 价格 两 个 功能 模块 ,主要 给 用 户 提供 
展示 旅游 景点 信息 的 功能 。 根 据 原型 设计 经 验 , 设 计 架 构 以 及 页 面 布局 ,把 功能 模块 组 合 
起 来 ,实现 页 面 的 整体 布局 

旅游 网 页 模块 设计 的 方法 如 下 : 

(1) 页 头 的 动画 模块 ,双击 打开 home 页 面 , 拖 动 一 个 矩形 组 件 ,“ 宽 度 " 设 置 为 1000， 
“高 度 " 设 置 为 730 , 线 宽 .线条 颜色 设置 为 默认 值 ; 拖 动 一 个 矩形 “宽度 "设置 为 1000， 
“高 度 " 设 置 为 144 ,标签 命名 为 Flash 动画 ,如 图 9-2 所 示 。 
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图 9-2 显示 页 头 


(2) 拖 动 鼠 标 来 创建 一 个 图 片 组 件 ,“ 宽 度 " 设 置 为 233,“ 高 度 " 设 置 为 51。 
(3) 拖 动 鼠标 来 创建 一 个 和 矩形, “宽度 "设置 为 214,“ 高 度 " 设 置 为 415 ,颜色 填充 为 # 
88C3D6 ,外 框 线条 设置 为 无 色 。 拖 动 鼠标 来 创建 矩形 “宽度 "设置 为 139，“ 高 度 " 设 置 为 
39 ,填充 颜色 为 白色 ,外 框 线条 设置 为 无 色 ;输入 文本 内 容 ,调整 字号 为 13 ,字体 颜色 为 黑 
色 ( 默 认 ) ,如 图 9-3 所 示 。 


Flash 动画 




















图 9-3 左 侧 内 容 的 显示 


(4) 拖 动 鼠标 来 创建 一 个 圆 形 ,宽度 "设置 为 10 高度" 设置 为 10 ,颜色 填充 为 # 
86CED0 ;再 拖 动 鼠标 来 创建 一 个 圆 形 , “宽度 " 设 置 为 10,“ 高 度 " 设 置 为 10 ,颜色 填充 为 # 
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000000 ; 拖 动 鼠标 来 创建 一 条 文本 标签 ,输入 文字 ; 拖 动 鼠标 来 创建 一 条 水 平 线 ,线条 颜色 
为 站 6CED0 , 线 宽 为 第 三 条 ,如 图 9-4 所 示 。 


Flash 动 画 











图 94 右 侧 标题 的 显示 


(5) 拖 动 鼠标 来 创建 一 张 图 片 ,宽度 设置 为 220 ,高 度 设置 为 128 ; 拖 动 鼠标 来 创建 一 
个 文本 标签 ,输入 文字 ,文字 颜色 为 #ff9900; 继 续 拖 动 鼠标 来 创建 一 个 文本 标签 ,输入 文 
字 , 字 体 颜 色 为 和 00000 ,字体 大 小 为 14 号 ,如 图 9-5 所 示 。 





31796 元 Rs x Re = 








[国庆 ]< 华 东 4 市 -上 海 过 士 尼 乐 国庆]< 华 东 4 市 -上 海 这 士 尼 乐 
国 -本州 双 6 日 尖 > 十 一 膏 当 刁 -杭州 双 6 日 洲 > 十 一 才 导 





图 9-5 右 侧 内 容 的 显示 


(6) 拖 动 鼠标 来 创建 一 个 文本 标签 ,输入 文字 内 容 ,完成 版 权 所 有 模块 的 制作 。 按 
了 5 键 测试 效果 ,如 图 9-6 所 示 。 
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图 9-6 低 保 真 原型 效果 


2. 根据 低 保 真 原型 使 用 Dreamweaver CS 制作 网 页 
由 效果 图 的 需求 分 析 模 块 可 以 看 出 ,网 页 中 需要 插入 动画 .图像 文字 。 具 体制 作 时 ， 
分 为 构建 HTML 结构 和 设置 CSS 样式 属性 两 部 分 来 进行 ,如 图 9-7 所 示 。 
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图 9-7 旅游 网 
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1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复 制 至 创建 My Web 站 点 的 根 目 录 中 。 

(2) 启动 Dreamweaver CS ,打开 “文件 "面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 travel. 
html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 对 网 页 进行 整体 布局 划分 ,页 面 结构 分 为 页 头 动画 部 分 内容 介绍 部 分 和 版 权 信 
息 部 分 。 

(4) 页 头 动画 部 分 的 代码 如 下 : 








<div id="content" > 
<! - -页 头 动画 部 分 开始 --> 
<div id=header" > 
<object id="FlashID" classid ="clsid:D27CDB6E -AE6D -11cf -96B8 -444553540000" 
width ="1002" height ="150" > 
<param name ="movie" value ="images/top.swf"/> 
<param name ="quality" value ="high"/ > 
<param name ="wmode" value ="opaque"/ > 
<param name ="swfversion" value 2"8 .0.35.0"/ > 
<! -- 此 qparam > 标签 提示 使 用 Flash Player 6.0 和 更 高 版 本 的 用 户 下 载 最 新 版 本 的 
Flash Player。 如 果 不 想 让 用 户 看 到 该 提示 ,请 将 其 删除 。- -> 
<param name ="expressinstall" value ="../Scripts/expressInstall .swf"/> 
<! 一 -下 一 个 对 象 标签 用 于 非 焉 浏览 器 。 所 以 使 用 IEcc 将 其 从 焉 中 隐藏 --> 
-= 2--> 
‘<object type ="application/x -shockwave -flash" data ="images/top. swf" width 
="1002" height ="]150" > 
<!——<![endif] -一 > 
<param name ="quality" value =high"/ > 
<param name ="wmode" value 一 opaque"/ > 
<param name ="swfversion" value 2"8.0.35.0"/> 
<param name ="expressinstall" value =". ./Scripts/expressInstall 
-Swf"/> 
<! -浏览 器 将 以 下 替代 内 容 显 示 给 使 用 Flash Player 6.0 和 更 低 版 本 的 用 户 。 
一 -> 
<div> 
<h4 油 页 面 上 的 内 容 需 要 较 新 版 本 的 Adcbe Flash Player。 </h4 > 
< ><a href ="http://www.adobe.com/go/getflashplayer" > <img src =" 
http://www. adobe. com/images/shared/download _ buttons/get _flash 
player.gif" alt 二 获取 Adobe Flash Player" width="112" height "33"/ 
></a></p> 
</div> 
< ==[iE IE] >==> 
</cbject > 
<!—-<![endif] -一 > 
</cbject > 
</div> 
<! -页 头 动画 部 分 结束 --> 











(5) 内 容 介绍 部 分 分 为 左 侧 旅 游 介绍 部 分 和 右 侧 图 片 内 容 部 分 ,代码 如 下 : 
116 


单元 9 旅游 景点 网 站 一 Axure 低 保 真 原型 设计 与 CSS 模型 结构 的 标准 文档 流 











<div id="cont" > 
<div id="leftlist"> 
<div id="imgl"> 
<img src ~"images/al .PNG"/ ></div > 
<div id—"img2" > 
<u> 
< 新 州 smnbsp; gnbsp; snbsp; <span class ="font2" ><img src= 
"images/x.png" width ="10" height ="10"/ 况 508083 </span ></1i > 
<Li x 镇 gnbsp; gnbsp; gnbsp; <span class "font2" ><img src= 
"images/x.png" width ="10" height ="10"/ 264837 </span ></1i > 
<Li 涝 州 snbsp; gnbsp; snbsp; <span class "font2" ><img src= 
"images/x.png" width ="10" height ="10"/ ;2230465 </span ></1i > 
<Li 清 京 snbsp; gnbsp; snbsp; <span class =font2" ><img src= 
"images/x.png" width ="10" height ="10"/ 习 413739 </span ></1i > 
<Li 酒 塘 gnbsp; gnbsp; snbsp; <span class "font2" ><img src= 
"images/x.png" width ="10" height ="10"/ %528780 </span ></1i> 
<Li 汤 州 snbsp; gnbsp; snbsp; <span class =-"font2" ><img src= 
"images/x.png" width ="10" height ="10"/ 习 93106 </span ></1i > 
</ul > 
</div> 
</div> 
<div id="rightlist"> 
<div id="rightl" > 
<img src ="images/rightl .png"/ ></div > 
<div id="right2" > 
<table width ="722" height ="488" border ="0" cellpadding ="0" cellspacing ="0" > 
<Er > 
<td > <img src ="images/r01 .png" width 2"221" height ="126"/ ></td> 
<td > <img src ="images/r02 .png" width 2"221" height ="126"/ ></td > 
<td > <img src ="images/r03.png" width 2"221" height ="126"/ ></td > 
</tr> 
<tr> 
<td height ="66" > 
<span class ="font1" >&yen;1796 元 </span > <span class 一 font2" >&nbspy 
gnbsp; snbsp; 满 意 度 : </span > <span class "font3" 3395% </span ><br/ > 
<br/ > 
<span class ="font4" > 
国庆 】s8249; 华 东 4 市 一 上 海 迪士尼 乐园 一 杭州 s8250; </span ></td> 
<td ><span class ="font1" >gyen;1379 元 </span > <span class ="font2" >gnbsp; 
gnbsp; snbsp; snbsp; 满 意 度 : </span ><span class "font3" 2938% </span ><br/ > 
<br/ > 
<span class ="font4" > 
国庆 】s8249; 杭 州 一 西塘 一 苏州 一 乌镇 s8250; 无 忧 接 机 </span ></tda> 
<td ><span class 二 fontl" >&yen;918 元 </span ><span class 2"font2" >gnbsp; 
&nbsp; snbsp; gnbsp; gnbsp; 满 意 度 : </span ><span class font3" >608 </span ><br/ > 
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<br/ > 
<span class ~"font4" > 
【国庆 】s8249; 千 岛 湖 一 乌镇 一 苏州 e8250; 天 然 氧吧 </span ></td> 
</tr> 
<Er > 
<td ><img src ="images/r04 .png" width ="221" height ="126"/ ></td> 
<td > <img src ="images/r05 .png" width ="221" height ="126"/ ></td> 
<td > <img src ="images/r06 .png" width ="221" height ="126"/ ></td> 
</tr> 
<Er > 
<td ><span class 二 fontl" >&yen; 2449 元 </span > <span class ="font2" >gnbsp; gnbsp; 
snbsp; gnbsp; snbsp; 满 意 度 : </span ><span class "font3" 396% </span > <br/ > 
<br/ > 
<span class ="font4" > 
国庆 】s8249; 华 东 6 市 一 扬州 一 乌镇 s8250;0 购物 </span ></td > 
<td ><span class 二 fontl" >&yen; 2872 元 </span > <span class ="font2" >gnbsp; gnbsp; 
&nbsp; gnbsp; gnbsp; 满 意 度 : </span ><span class "font3" 397% </span ><br/ > 
<br/ > 
<span class ="font4" > 
国庆 】s8249; 上 海 迪 士 尼 乐园 一 杭州 双飞 游 s8250; </span ></td> 
<td ><span class 二 fontl" >&yen;1643 元 </span > <span class ="font2" >gnbsp; gnbsp; 
snbsp; gnbsp; gnbsp; 满 意 度 : </span ><span class "font3" 396% </span > <br/ > 
<br/ > 
<span class ="font4" > 
国庆 】 e8249; 上 海 迪 士 尼 乐 园 g250; </span ></td > 
</tr > 
</table > 
</div> 
</div> 
</div> 








(6) 版 权 信息 部 分 的 代码 如 下 : 








<div id="footer" >Copyrightgcopy;2006 -2017 南京 科技 有 限 公 司 | 营业 执照 IIcP 证 : 
2013006 | 石家庄 旅游 网 

</div> 

<script type ="text/javascript" > 
swfobject .registerobject ("FlashID"); 

</script > 





2) 设置 CSS 样式 属性 
(1) 本 例 使 用 链接 样式 表 。 








<Link rel ="stylesheet" type ="text/css" href ="travel .css"/> 
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body{ 
margin:0 auto; 
Padding:07 

eontent{ 
position: relative; 
width:1020px; 
height :700px; 
margin -top:1px; 
margin: 0 auto; 





(3) 页 面 中 动画 大 小 样式 的 定义 。 





Header{ 
width:1002px; 
height :150px; 
margin: 0 auto; 





(4) 页 面 结 构 的 左 侧 图 片 和 内 容 样式 的 定义 。 








北 ont{ 
width:1020px; 
height :560px; 

} 

一 eftlist{ 
width:233px; 
height :550px; 
float:left; 

} 

#mgl { 
width:233px; 
height:51px;} 


mg2 { 
background -image: url (images/left0]1 .png); 
width:220px; 
height :487px; 

} 

#ont ul 1i{ 
background -image:url (images/left? .png); 
background -repeat :no -repeat; 
background -position:right; 
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list -style:none; 
line height:37px; 
height:40px; 
padding -left :60px; 
Padding top:10px; 
font -size:l13px; 

$ 

ul 
list -style -type:none; 
margin:0px; 
pagdding:5px; 





(5) 页 面 结构 的 右 侧 图 片 和 内 容 样式 的 定义 。 





#ightlist{ 
width:730px; 
height :48px; 
float:left; 

} 

#ight1 {width:728px; 

height :48px; } 

.fontl { 
padding -left:15px; 
Color: #90; 
font -size: 16px; 
font -weight: bold; 

} 

.font2 { 
color: $99; 
font -size: 12px; 

} 

.font3{ 
color: 90; 
font -size: 12px;} 

.font4{ 

Color: 丰 007 
font -size:12PX7 





(6) 版 权 信息 样式 的 定义 。 








韭 ooter{ 
font -size:12px; 
Color: B33; 
text -align:center; 





120 








单元 9 旅游 景点 网 站 一 Axure 低 保 真 原型 设计 与 CSS 模型 结构 的 标准 文档 流 





(7) 保存 文件 。 按 Cul +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 


【知识 归纳 】 


HTML 中 的 大 部 分 元 素 都 可 以 看 作 一 个 盒子 ,网 页 元 素 的 定位 实际 就 是 这 些 盒子 在 
网 页 中 的 定位 。 网 页 布局 就 是 如 何在 网 页 中 摆 放 嵌 套 这 些 盒子 , 摆 放 或 嵌 套 这 些 盒子 时 
需要 精确 计算 。 盒 子 模型 的 一 般 计 算 方式 如 下 。 

实际 宽度 如 下 : 

width + padding-left + padding-right + border-left + border-right + margin-left + 
margin-right 

实际 高 度 如 下 : 

height + padding-top + padding-bottom + border-top + border-bottom + margin-top + 
margin-bottom 


任务 9-2 制作 旅游 网 正文 
标准 文档 流 





应 用 


【知识 储备 】 


1. 标准 文档 流 的 概念 

在 没有 为 网 页 元 素 添加 CSS 定位 或 浮动 等 属性 的 情况 下 ,网 页 元 素 都 是 按 HTML 代 
码 的 顺序 自 上 而 下 或 自 左 向 右 逐 步 分 布 的 ,就 像 流水 一 样 ,这 种 流动 方式 被 称 为 标准 文档 
流 。 标 准 文档 流 是 网 页 默认 的 元 素 排列 方式 。 

2. 标准 文档 流 的 布局 特征 

(1) 块 级 元 素 会 在 所 处 的 包含 元 素 内 自 上 而 下 按 顺 序 垂直 分 布 。 因 为 在 默认 状态 
下 ,不 管 把 块 级 元 素 的 宽度 设置 得 多 窗 , 它 都 会 独占 一 行 。 

(2) 内 联 元 素 会 在 所 处 的 包含 元 素 内 自 左 向 右 水 平分 布 。 超 出 一 行 后 ,会 自动 自 上 


标准 文档 流 是 网 页 布局 模式 ,任何 没有 被 添加 position ,float 属性 的 元 素 默 认 都 具有 
标准 文档 流 的 特点 。position 属性 用 于 对 网 页 元 素 进 行 定位 ,float 属性 用 于 使 网 页 元 素 脱 
离 标准 文档 流 而 呈 浮 动 状态 。 在 实际 的 网 页 布局 中 ,一 般 要 结合 使 用 多 种 布局 模式 。 


【素材 收集 】 
创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 
实例 素材 位 置 :“ 单 元 9” 目 录 下 的 images 子 目 录 。 
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效果 文件 位 置 :“ 单 元 9" 目 录 下 的 tour. html。 


【任务 实施 】 


制作 显示 页 面 的 内 容 部 分 。 整 个 内 容 主要 分 3 部 分 : 标题 段落 和 图 像 。 利 用 CSS 


设置 网 页 的 样式 ,如 图 9-8 所 示 。 















Vt 泥 西 仙 | 的 请 子 赚 ， 奇 由 突 元 , 高 兽 
赋 晴 ， 形 如 表面 。 嫌 上 有 明 人 杨 博 题记 的 
凑 迪 石刻 Rt 。 岩 西 有 铁 梯 ; 全 






昭 杰 下 分 4 en Ek 

的 训 二 也 像 是 一 条 五 
及 的 驶 带 ， 在 此 流 消 得 格外 精神 。 动人 的 彩 石 常 引 

得 蘑 人 驻足 ， 如 果 你 细心 ， 就 可 看 见 水 中 的 击 兰 







至 8 明珠 ， 闪 闪 发 光 站 
Fi 入 村 执 于 全 1 [eh Ei 
+ 的确 写 出 了 肩 子 道 的 风 的 


名 来 山 1 绍 
突 下 而 立 于 华北 大 平原 东 侧 的 齐 务 古 国 ， 东 临 浩 波 无 着 的 大 海 ， 西 靠 源远流长 、 痉 流 到 海 不 复 回 的 葵 
、 泗 、 淮 之 水 * 纵览 东部 沿海 广大 区 域 ， 泰山 居高临下 ， 改 驾 于 齐鲁 丘 铬 之 上 ， 真 正成 了 茫 东 原野 上 的 “ 东 天 一 柱 "。 
们 委 有 了 素 山 为 天 下 之 中 心 的 大 

素 山 除了 深厚 的 文化 内 通 外 ， 还 具有 丰富 的 自然 美 。 如 果 把 风景 自然 美的 形象 特征 概括 为 雄 、 背 、 险 、 郑 、 山 、 
与 、 旷 ， 那么 泰山 除了 从 总 体 上 和 大 观 上 具有 妈 伟 的 特征 外 ， 还 在 雄 中 但 含 着 奇 、 险 、 秀 、 山 、 奥 、 了 等 美的 形象 。 

泰山 风景 区 内 ， 有 山峰 156 座 ， 肉 内 138 座 ， 名 洞 72 处 ， 奇石 72 块 ， 湛 从 130 条 ， 温 造 64 处 ， 名 和泉 72 腿 ， 古 树 名 木 万 余 
株 ， 寺 庙 58 座 ， 古 遗址 128 处 ， 碑 碍 1239 块 ， 麻 内 废 石 1277 处 。 主 要 分 布 在 供 阳 、 代 项 、 扫 阴 及 灵 岩 * 

秦山 是 一 座 天 然 的 历史 、 芝 术 博物 馆 ， 仅 在 泰山 的 中 轴线 上 名 现存 有 各 种 石刻 1600 余 处 ， 有 的 为 帝王 订 制 ， 有 的 出 自 
名 流 之 手 ， 大 孝文 敌 优 拓 ， 书 体高 雅 ， 制 作 精 I5。 


图 9-8 旅游 网 






南 有 
样 , 十 人 








1) 构建 HTML 结构 
(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 
(2) 启动 Dreamweaver CS, 打 开 “ 文 件 "面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 tour. 


html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 


(3) 整个 内 容 部 分 的 代码 如 下 : 








<body> 
<div id =content > 
<div id =content] > 
-- 图 片 开始 --> 
<> 
<Li ><IMS height 习 20 alt = 天 街 src=images/i01.jpg" width 本 60 ><1i> 
<Li ><IMSE height 习 20 alt -中 天 门 ”src=images/i02.gif" width 本 60 ><1i> 
<Li ><IMG height 320 alt 起 日 东升 src "images/i03.jpg" width 导 60 ><1i> 
<Li ><IMG height 320 alt 也 岳 独 尊 ”src "images/i04.jpg" width 导 60 ><1i> 
<Li ><IMG height 刁 20 alt -云海 玉 盘 src "images/i05.jpg" width= 
160 border -0 ></1i > 
</ul > 
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<! -- 图 片 结束 --> 


<0l > 

<! - -标题 开始 --> 
<Li xx 天 街 </1i> 
<i 冲 天 门 wii> 
<i 泪 日 东升 </1i> 
<Li 症 岳 独 尊 </1i > 
<Li > 云海 玉 扒 </1i > 

<! - -标题 结束 --> 

</al > 

</div> 
</div> 


<div id=mainl > 
<div class -divLeft > 
<h2 id -2Left >gnpbsp; 泰山 摄影 </h2 > 
<div class distDiv > 
p><img height 习 15 alt - 彩 石 溪 src "images/caishixi.jpg" width 习 60 border 习 > 
<span class 习 istMore : 形 石 溪 </span > 
</p> 
<ul > 
<! -- 自 落 开 始 --> 
<1i >gnbsp; snbsp; snbsp; gnbsp; 进入 桃花 峪 , 行 约 2 千 米 , 溪 中 流水 之 下 忽 如 彩 石 铺 
就 , 溪 底 一 条 条 石 纹 五 彩 纷呈 ,阳光 照耀 下 分 外 生动 ,这 就 是 著名 的 " 彩 石 溪 "。 弯 
变 曲 曲 的 溪水 像 是 被 彩 石 染 上 了 色 , 也 像 是 一 条 五 彩 的 飘带 ,在 此 流 消 得 格外 精 
神 。 动 人 的 彩 石 常 引 得 游人 驻足 ,如 果 你 细心 ,就 可 看 见 水 中 的 赤 鳞 鱼 。 
</1i > 
<! -段落 结束 --> 
</ul > 
</div> 
</div> 


<div class -divRight > 
<h2 id =h2Right >gnbsp; gnbsp; gnbsp; gnbsp; 景 点 推荐 </h2 > 
<div class <listDiv > 
<p><img height 习 15 alt -山子 崖 src "images/shanziya.jpg" width 习 60 border 习 > 
<span class 习 istMore > 叶子 崖 </span ></p > 
<ul > 
<1i >gnbsp; snbsp; &nbsp; &nbsp; 位 于 泰山 西溪 西 侧 的 扇子 崖 ,奇峰 突 元 ,高 答 峻 峭 ， 
形 如 扇面 。 崖 上 有 明 人 杨 博 题 刻 的 摩崖 石刻 "仙人 掌 "。 崖 西 有 铁 梯 , 攀 援 可 登 崖 
医 。 北 胱 龙 角 山 , 九 女 寨 历历 在 目 ; 西 望 做 徕 峰 尽 收 眼底 ;向 东 俯 视 , 龙 潭 水 库 宛若 
镶嵌 在 西溪 的 一 颗 璀璨 的 明珠 ,闪闪 发 光 。 清 人 孙 宝 亿 有 诗 云 : " 剑 峰 她 刺 天 , 积 
铁 拔 千 人 ; 俯 临 鬼 谷 幽 , 旁 倚 丈 人 峻 ", 的确 写 出 了 扇子 崖 的 风 音 。 </1i > 
</ul > 
</div> 
</div> 
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<div idq main2 > 
<div id="scape" class ~"mainDiv" > 
<h2 > <img src "images/arrow.gif" alt 一 "/ x 素 山 旅游 景点 </h2 > 
<div class 2'mainContent" > 
<> 
<i 准 庙 : 宋 天 岗 殿 …… <br/ > 
丽 区 : 王 母 池 …… <br/ > 





… <br/ > 
妙 区 : 南天 门 …… <br/ > 





<div class ="foot" ></div > 
</div> 


<div id="depict"> 
<h2 >Enbsp; 泰 山 介绍 </h2 > 
<! -段落 开始 --> 
<div> 
Snbsp; snbsp; gnbsp; &nbsp; 泰山 突 元 而 立 于 华北 大 平原 东 侧 的 齐鲁 古国 , 东 临 浩 波 无 
涯 的 大 海 , 西 靠 源 远 流 长 ,奔流 到 海 不 复 回 的 黄河 , 南 有 汶 、 泗 、 淮 之 水 。 纵 览 东 部 沿海 广大 
区 域 ,泰山 居高临下 ,凌驾 于 齐鲁 丘 群 之 上 ,真正 成 了 茫茫 原野 上 的 " 东 天 一 柱 "。 这 样 , 古 
人 们 便 有 了 泰山 为 天 下 之 中 心 的 感觉 。<br/ > 
snbsp; &nbsp; gnbsp; snbsp; 泰山 除了 深厚 的 文化 内 涵 外 ,还 具有 丰富 的 自然 美 。 如 果 把 
风景 自然 美的 形象 特征 概括 为 雄 . 奇 . 险 . 秀 . 幽 . 奥 . 旷 ,那么 泰山 除了 从 总 体 上 和 宏观 上 具 
有 雄伟 的 特征 外 ,还 在 雄 中 蕴含 着 奇 . 险 . 秀 . 幽 、 奥 . 旷 等 美的 形象 。 sbr/ > 
gnbsp; &nbsp; &nbsp; &nbsp; 泰山 风景 区 内 ,有 山峰 156 座 , 岸 岭 138 座 , 名 洞 72 处 ,奇石 
72 块 , 溪 谷 130 条 , 瀑 潭 64 处 ,名 泉 72 眼 , 古 树 名 木 万 余 株 , 寺 庙 58 座 , 古 遗址 128 处 , 碑 碍 
1239 块 ,摩崖 刻 石 1277 处 。 主 要 分 布 在 岱 阳 、 岱 顶 、 岱 阴 及 灵 岩 。 <br/ > 
&nbspy snbsp; snbsp; gnbsp; 泰山 是 一 座 天 然 的 历史 ,艺术 博物 馆 , 仅 在 泰山 的 中 轴线 上 
就 现存 有 各 种 石刻 1800 余 处 ,有 的 为 帝王 亲 制 ,有 的 出 自 名流 之 手 , 大 都 文辞 优美 , 书 体高 
雅 ,制作 精巧 。 
</div> 
<! -- 彼 落 结束 盖 二 条 
</div> 
</div> 
</pbody > 











(4) 从 效果 图 中 可 知 ,文字 及 图 像 整体 在 页 面 中 有 一 定 的 宽度 并 需要 居中 。 为 此 ,在 
设计 视图 中 ,使 用 CSS 样式 属性 控制 元 素 的 宽度 .高度 等 。 
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2) 设置 CSS 样式 属性 
(1) 本 例 使 用 链接 样式 表 。 








<Link href =—"css/main.css" type text/css rel =stylesheet > 








(2) 设置 图 像 .文字 ,标题 页 面 的 标签 代码 如 下 : 








body { 
font -size:14px; 
margin:0px; 
Padding:0px; 

} 

rn2{ 
list -style -type:none; 
margin:0px; 
font -size:14px; 

} 

uf 
list -style -type:none; 
margin:0px; 
pagdding:5px; 

t 

a:link{color: 失 6c; } 

a:visited{color: 才 6c;} 

a:active{color:#E90;} 
a:hover{color:#F3300;} 
ontent { 
WIDTH: 950px; 
margin:auto; 
height :165px; 
line -height:120%; 
padding -top: 10px; 

} 

#ontent #ontentl { 
border: $FBASA lpx solid; 
float: left; 
width: 930px; 
padding: 8px; 
clear: both; 

} 

ontent tontentl LI { 
width:170px; 
Padding -right: 7px; 
padding -left: 7px; 
float: left; 
text -align:center; 
white -space: nowrap; 
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list -style:none; 
font -size:13px7 

} 

doainl { 
width:950px; 
height :200px; 
margin -right: auto; 
margin -left: auto; 
padding -top: 10px; 
margin -top: 5px; 
padding -bottom: 10px; 


-divLeft{ 
float:left; 
width:464px; 
height :190px; 
border:1px solid #FBASA; 
Overflow:higdden; 
} 
.divRight { 
float:right; 
width:464px; 
height :190px; 
border:1lpx solid #FBASA; 
overflow:hidden; 
} 
#2Left { 
background:transparent url (../images/bg01 .gif) no -repeat scroll left Opx;height: 
16px; 
padding:10px 10px 10px 50px; 


2Right { 
background:transparent url (../images/bg02 .gif) no -repeat scroll left Opx;height: 
16px; 
padding:10px 10px 10px 50px; 
} 
-listDiv { 
float:left; 
font -size:12px; 
width:445px; 
line height:130%; 
padding -top: Spx; 
padding -right: Opx; 
padding -bottom: Opx; 
pagdding -left: 15px; 
height: 160px; 
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} 

.listDivp { 
float:left; 
width:160px; 

.listDivul { 
float:right; 
margin top: 5px; 
width:270px; 

} 

-listMore 


{text -align:center; display:block; height :26px;} 


main2 { 
width:950px; 
height :230px; 
margin -right: auto; 
margin -left: auto; 


padding -bottom: 10px; 


clear: both; 
float: none; 


cape 


height :215px; 
width:222px; 
float: left; 
clear: left; 

} 

.mainDiv{ 
float:left; 
width:222px; 
overflow:hidden; 

} 

-minDiv h2 { 


background:transparent url (../images/bg03.gif) no -repeat scroll 0%50%; 


Color:23D6A; 
float:left; 
height:26px; 


padding:5px Opx Opx 15px; 


width:207px; 
font -size:14px7 


.mainContent { 


border -left :lpx solid #FBASA; 
border -right :1px solid #FRASA; 


float:left; 
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line -height:20px; 
font -size:12px7 
width:215px; 
line height:180%; 
padding -left :5px; 

} 

.minDiv .foot { 
background:transparent Url (../images/bg04.gif) no -repeat scroll 0%; 
font -size:5px; 
float:left; 
height :6px; 
width:222px; 

} 

depict { 
margin -left:10px; 
float:right; 
width:710px; 
height :215px; 
border:1px solid #FBASA; 
Overflow:higdden; 
line height:150%; 
clear: right; 

} 

epict h2 { 
background:transparent Url (../images/bg05 .gif) no -repeat scroll left Opx;height: 
16px; 
padding:10px 10px 10px 50px; 

a 


depict div 

{ 
margin -top:0px; 
padding:0px 10px Opx 10px; 
font -size:12px; 
line -height: 150%; 

} 











(3) 保存 文件 。 按 Cul +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 


【知识 归纳 】 


在 新 闻 里 的 图 像 有 时 会 很 大 ,可 能 会 超过 正文 的 最 大 宽度 ,因此 可 以 利用 max-width 
元 素 和 max-height 元 素 属性 控制 图 像 的 最 大 显示 宽度 与 高 度 。 

“display :block" 元 素 属性 表示 将 图 像 转换 为 块 级 元 素 ,从 而 使 图 像 独占 一 行 。 图 像 
成 了 块 级 元 素 之 后 和 标题 不 一 样 , 它 的 宽度 不 是 100% ,而 是 自身 元 素 所 占 宽度 ,因此 居 
中 就 不 能 使 用 “text-align :center" 属 性 ,要 使 用 “margin:auto" 属性。 
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任务 拓展 


制作 如 图 9-9 所 示 的 网 页 ,素材 参照 本 单元 中 文件 夹 。 






> 园 博 简 介 


> 持 力 园 博 


> 精美 图 片 


> 联系 我 们 


联系 电话 ，400-697-2929 





> 改善 要 求 


和 和 人 1 联系 拒 门 | 忆 若 首页 


区 博 介绍 


一 、 第 九 届 中 国 〈 北 京 ) 国际 区 林 博 览 会 组 委 会 。 “第 九 届 中 国 【北京 】 国际 园林 博览 会 组 秋 会 
(以 下 简称 ， 欧 博 会 组 委 会 ) 由 住房 和 城乡 建设 部 、 北 京 市 人 民政 府 〈 主 办 方 ) 和 中 国 风景 园林 学 
会 、 中 国 公园 协会 、 北 京 市 园林 绿化 局 《承办 方 ) 的 相关 领导 组 成 ， 搞 等 领导 园 博 会 筹办 和 运营 工 
作 ， 主 要 职责 ， 审 定 园 博 会 组 织 实施 方案 、 园 博 园 总 体 规划 ， 审定 园 博 会 开 意 式 、 闭 幕 式 方案 、 组 
织 评奖 办 法 ， 听 到 因 博 会 筹办 期 间 各 项 工作 进展 情况 报告 ， 及 时 协 油 解决 筹办 过 程 中 的 有 关 问题 组 
织 召开 园 博 产 新 闻 发 布 富 , 二 、 第 九 层 中 国 〈 北 京 ) 国际 园林 博览 会 筹办 建设 工作 指挥 部 
为 更 好 地 开展 区 博 会 筹办 建设 工作 ， 加 强 筹办 建设 工作 的 组 织 领 导 ， 加 强 园 博 会 筹办 建设 相关 部 门 间 
的 协调 沟通 ， 成 立 第 九 届 中 国 〈 北 京 ) 国际 园林 清 览 会 筹办 建设 工作 指挥 部 以 下 简称 ， 园 
指挥 部 ) ， 主 要 职责 :负责 组 织 制 会 组 织 实施 方案 ， 编制 于 博 园 总 体 规划 及 展 后 | 
维护 、 保 护 管理 及 发 展 利用 方案 
持 与 服务 ， 按 期 完成 园 博 会 筹办 和 运营 各 项 工作 ， 负 责 协 调 
园 博 会 筹建 指挥 部 下 设 办 公 室 ， 在 丰台 区 政府 办 公 ， 永 办 园 博 会 筹建 指挥 部 的 日 常 工作 。 
















图 9-9 网 页 预览 效果 
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利用 浮动 方式 进行 图 文 排版 是 网 页 中 常用 的 一 种 方式 。 在 标准 文档 流 布局 中 , 块 级 
元 素 在 网 页 中 会 独占 一 行 。 那 么 如 何 让 块 级 元 素 在 同一 行 显示 呢 ? 答案 是 使 用 CSS 浮 
动 属性 ,利用 属性 改变 块 级 元 素 的 实现 方式 ,使 其 脱离 标准 文档 流 而 呈 浮 动 状 态 。 

教学 目标 : 
掌握 浮动 布局 的 基本 原理 和 float 属性 的 用 法 。 
e 掌握 clear 属性 的 含义 和 用 法 。 
。 掌握 浮动 元 素 的 display 属性 。 
日 利用 浮动 方式 对 页 面 进行 布局 


任务 10-1 校园 新 闻 页 面 一 常用 浮动 
布局 方法 


【知识 储备 】 


1. 认识 CSS 中 的 定位 属性 

CSS 基本 的 定位 机 制 : 标准 文档 流 ,浮动 .相对 定位 和 绝对 定位 。 

(1) 在 标准 文档 流 中 , 块 级 元 素 从 上 到 下 一 个 接 一 个 地 排列 , 框 之 间 的 垂直 距离 是 由 
元 素 的 垂直 外 边 距 计算 得 来 的 。 

(2) 行内 元 素 在 一 行 中 水 平 布置 ,可 以 使 用 水 平 内 边 距 .边框 和 外 边 距 调整 它们 的 间 
距 。 但 是 ,垂直 内 边 距 ,边框 和 外 边 距 不 影响 行内 框 的 高 度 。 由 一 行 形成 的 水 平 框 称 为 行 
框 (line box) , 行 框 的 高 度 总 是 足以 容纳 它 包含 的 所 有 行内 框 。 不 过 ,设置 行 高 可 以 增加 
这 个 框 的 高 度 。 

(3) 在 实际 工作 中 ,相对 定位 与 绝对 定位 的 使 用 效率 很 高 ,这 两 种 定位 通常 搭配 
使 用 。 

相对 定位 ( position:relative) 指 的 是 让 元 素 本 身 相 对 于 它 原始 的 起 点 进行 定位 。 应 用 
相对 定位 的 元 素 ,即便 赋予 新 的 位 置 值 ,但 仍然 占据 原来 的 位 置 空间 。 

绝对 定位 (position:absolute) 指 的 是 依据 浏览 器 左上 角 位 置 开始 计算 。 应 用 绝对 定 
位 的 元 素 可 以 被 放置 在 页 面 中 的 任何 位 置 ,并 且 多 个 对 象 可 以 进行 层 琶 , 层 倒 顺序 由 
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z-index 属性 控制 ,z-index 属性 值 越 高 , 则 对 象 的 位 置 就 越 高 。 

相对 定位 和 绝对 定位 在 定位 过 程 中 要 注意 left top right 和 bottom 属性 只 需 定 义 两 个 
即 可 ,水 平方 向 为 left 或 right ,垂直 方向 为 top 或 bottom, 即 * 轴 与 y 轴 两 点 确定 位 置 。 不 
能 同时 设置 4 个 属性 。 

左上 角 : left:0px; top:0px。 

右上 角 : right:0px; top:0px。 

左下 角 : left:0px; bottom:0px。 

右 下 角 : Tight:0px; bottom:0px。 

2. float 和 clear 属性 

float 属性 用 于 定义 元 素 浮动 的 方向 。 这 个 属性 总 应 用 于 图 像 ,是 文本 围绕 在 图 像 周 
围 。 在 CSS 中 ,任何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 。float 属性 值 分 别 介 
绍 如 下 。float:left 表示 元 素 向 左 浮动 ;float:right 表示 元 素 向 右 浮动 ;float: none 表示 默认 
值 。 元 素 不 浮动 ,会 显示 在 文档 中 出 现 的 位 置 。float:inherit 表示 规定 应 该 从 父 元 素 继承 
float 属性 值 ,IE 不 支持 该 属性 。 

clear 是 一 个 与 float 相反 的 属性 ,定义 元 素 不 允许 出 现 浮 动 。clear 属性 值 分 别 说 明 如 
下 。clear:left 表示 在 左 侧 不 允许 有 浮动 元 素 ;clear:right 表示 在 右 侧 不 允许 有 浮动 元 素 ; 
clear:both 表示 在 左右 两 侧 均 不 允许 有 浮动 元 素 ;clear:none 表示 默认 值 ,允许 浮动 元 素 出 
现在 两 侧 。clear:inherit 表示 规定 应 该 从 父 元 素 继承 clear 属性 值 , 正 不 支持 该 属性 。 

float 属性 可 用 于 任何 HTML 元 素 。 设 置 了 浮动 属性 的 元 素 遵循 以 下 规则 。 

(1) 浮动 元 素 的 边 距 不 会 产生 重 释 。 

(2) 只 有 元 素 中 的 内 容 会 受到 浮动 元 素 的 影响 ,也 就 是 背景 . 边 距 .边框 ,填充 等 盒子 
模型 相关 属性 不 受 影响 。 

(3) 浮动 元 素 均 被 视 为 块 级 元 素 ,元素 的 实际 宽度 和 高 度 由 边 距 .边框 填充 宽度 和 
高 度 属性 决定 。 

3. 常用 的 浮动 布局 方法 

浮动 式 网 页 布局 是 网 页 制作 中 常用 的 方法 。 在 网 页 中 插入 id 名 分 别 为 left 和 right 
的 <div> 标 签 ,下 面 以 HTML 代码 为 例 进行 说 明 。 

1) 两 个 元 素 都 是 左 浮动 或 右 浮动 

在 网 页 中 的 ”< style > </style > "标签 对 中 加 入 以 下 样式 ,效果 如 图 10-1 所 示 。 





<style> 
#1left,#right{float:left}; 
</style> 








图 10-1 ”两 个 块 级 元 素 向 左 浮动 
将 网 页 的 CSS 样式 设置 为 右 浮动 ,效果 如 图 102 所 示 。 
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<style> 


#1left,#right{float:right}; 
</style> 








图 10-2 ”两 个 块 级 元 素 向 右 浮动 


2) 第 一 个 左 浮动 ,第 二 个 右 浮动 
将 网 页 的 CSS 样式 设置 为 一 个 左 浮动 一 个 右 浮动 ,效果 如 图 10-3 所 示 。 





<style> 
#left{float:left;} 
#right{float:left;} 
</style> 











图 10-3 一 个 左 浮动 ,一 个 右 浮动 


3) 第 一 个 左 浮动 ,第 二 个 设置 左边 距 
设置 网 页 的 CSS 样式 ,效果 如 图 104 所 示 。 


<style> 
#1left{ 
width:100px; 
float:left; 
} 
#right{ 
margin-left:100px; 
} 
</style> 








SS 一个 元 示 OWE 
SSN SS 一 bas 








图 104 一 个 左 浮动 ,一 个 设置 左边 距 


4) 第 一 个 右 浮动 ,第 二 个 设置 右边 距 

将 网 页 CSS 样式 设置 如 下 ,效果 如 图 10-5 所 示 。 

4. 浮动 布局 应 用 技巧 

浮动 框 旁 边 的 行 框 会 被 缩短 ,从 而 给 浮动 框 留 出 空间 , 行 框 围 绕 浮动 框 。 因 此 ,创建 
浮动 框 可 以 使 文本 围绕 图 像 。 要 想 阻 止 行 框 围绕 浮动 框 ,需要 对 该 行 框 应 用 clear 属性 ， 
还 可 在 被 清理 的 元 素 的 上 外 边 距 上 添加 足够 空间 ,使 元 素 的 项 边缘 垂直 下 降 到 浮动 框 
下 面 。 
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<style> 
#1left{ 
width:100px; 
float:right; 
} 
#right{ 
margin-right:100px; 


} 
</style> 











图 10-5 一 个 右 浮动 ,一 个 设置 右边 距 


【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 10" 目 录 下 的 images 子 日 录 。 

效果 文件 位 置 :“ 单 元 10" 目 录 下 的 index. html。 


【任务 实施 】 


主要 利用 < div > 标签 完成 课程 网 站 首页 的 整体 布局 ,包括 构建 HTML 结构 和 设置 
CSS 样式 属性 两 部 分 。 主 要 利用 浮动 对 页 面 的 中 间 部 分 进行 整体 布局 。 

构建 整个 页 面 的 整体 布局 。 整 个 页 面 可 分 为 3 个 部 分 , 即 头 部 (header) ,主体 (main) 
和 尾部 (footer) 。 其 中 ,主体 又 分 为 课程 简介 公告 通知 ,特色 创新 .单元 教学 内 容 ,快速 按 
钮 和 风采 剪影 , 共 6 个 栏目 ,如 图 10-6 所 示 。 






































图 片 logo 
导航 条 菜单 头 部 (header) 
图 像 banner 
课程 简介 公告 通知 快速 按钮 
特色 创新 单元 教学 内 容 主体 (main) 
版 权 所 有 信息 footer 尾部 (footer) 











图 10-6 课程 网 站 首页 的 整体 布局 
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1) 构建 HTML 结构 
(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 


(2) 打开 “文件 "面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 index. html 的 网 页 文档 。 


(3) 调整 网 页 结构 ,将 网 页 元 素 中 的 < div > 布局 设置 如 下 。 








<body > 
<div id=all"> 
<!-- 头 部 header --> 
<header > 
<img src ="images/b01 .png"/ > 
<div id="dh" > 
<nav > 
<a href ="index.html" > 首页 </a> 
<a href 一 kcjj .html" > 课程 介绍 </a> 
<a href ="tscx.html" > 特色 创新 </a > 
<a href "dysj .html" 阅 元 设计 </a> 
<a href ="zzss.html" 少 织 实施 </a > 
<a href 一 jxkj .html" 汗 学 课件 </a > 
< href ="zxkt .html" > 在 线 课 堂 </a > 
<a href =help.html" > 帮助 <a> 
</nav > 
</div> 
<img src 2"images/b3.png" width ="1005" height ="255"/ > 
</header > 
<div class ="clear"> 
<div id 2'main" > 
<div id=mainl" > 
<div id—"left" > 


<! - -课程 简介 --> 
<div id 二 leftl" > <a href 二 kcjj.html" > <img src 2"images/11.png" width ="356" 
height ="36"/ ></a> 
了 中 尊 课 程 所 定义 的 经 济 法 ,是 指 与 市 场 经 济 有 关 的 法 律 规范 的 总 称 。 基 于 我 校 会 计 专 业 
的 特点 和 学 生 的 实际 需求 ,课程 体系 包括 五 个 单元 。 
(1) 第 一 单元 : 经 济 法 基础 知识 , 即 教学 大 纲 的 第 一 章 。 主 要 包括 经 济 法 概述 .基本 的 民 商 
法 律 制度 等 。 其 中 经 济 法 的 基本 原则 代理 .诉讼 时 效 是 重点 。 
本 课程 所 定义 的 经 济 法 ,是 指 与 市 场 经 济 有 关 的 法 律 。 </p > 
</div> 
<! 一 -特色 创新 --> 
<div id "left1" > <a href —"ggtz.html" > <img src "images/13.png" width ="356" 
height "36"/ ></a> 
<Q] > 
<1i ><img src=images/tb03.png" width="15"” height -15"/ > 
所 href "ggtz.html" > 课 后 作业 内 容 及 要 求 <pan 习 0 36 </span >Ya><1i> 
Ai><img src=images/tb03.png" width—"15" height -15"/ > 
心 href "ggtz.html" > 互动 平台 开通 了 ,欢迎 大 家 交流 学 习 <span >09 -28 
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</span ></1i> 
<Li ><img src="images/th03.png" width =15"” height ="15"/> 
<a href "ggtz.html" > 洒 彩 案例 更 新 ,请 学 习 下 载 <span >09 -20 </span > 
</1i> 
<1i ><img src=images/tb03.png" width ="15" height =15"/ > 
<a href "ggtz.html" > 关于 考试 形式 和 考试 要 求 的 通知 <span >09 -17 
</span ></1i > 
</ul > 
</div> 


<! -公告 通知 --> 
<div id ="leftl" ><a href ="tscx.html" ><img src ="images/12.png" width ="356" 
height ="36"/ ></a> 中 污 . 构 建 以 "就 业 " 为 导向 的 教学 模式 。 单 元 结合 会 计 专业 的 需求 
设置 内 容 。 比 如 ,学 生 就 业 面向 的 主要 是 中 小 微 企业 ,根据 这 类 企业 的 需求 设置 教学 内 容 ， 
使 学 生 初步 具备 处 理 职业 或 创业 性 法 律 问题 的 能 力 , 切 实 提升 学 生 的 综合 素养 和 专业 技 
能 ,保障 学 生 快速 就 业 ,稳定 发 展 。 </p > 
全 总 .以 " 殴 励 创造 财富 和 自主 创业 "为 主线 。 在 大 众 创业 ,万众 创新 的 背景 下 ,培养 学 生 
的 创新 意识 和 创业 能 力 尤为 重要 。 </p > 


</div> 

<! -单元 教学 内 容 --> 
<div id="leftl"><a href -dysj.html" ><img src 2"images/14.png" width= 
"356" height ="36"/ ></a> 
中 尊 项 目 整 合 的 知识 资源 包括 股份 有 限 公司 的 特征 、 上 股份 有 限 公 司 设立 的 条 件 \ 设 立 的 
程序 公司 的 事务 管理 等 。 学 生 可 在 课 前 登录 石家庄 企业 注册 网 站 查找 需要 资料 。 本 单元 
要 求学 生 重点 掌握 公司 设立 条 件 。 重 点 内 容 从 企业 是 从 事 有 风险 事业 的 组 织 视野 出 发 , 引 
导 学 生意 识 到 市 场 经 济 主体 创造 财富 是 一 项 需要 自己 承担 很 大 风险 和 需要 较 高 商业 智慧 
的 事业 。 公 司 制 的 企业 可 以 有 效 分 散 风险 ,保护 财富 创造 者 的 积极 性 。 新 公司 法 关于 设立 
江天 5 </p> 
</div> 

</div> 

<! - -快速 按钮 --> 


<div id=right" > 
<div id="rl"> 
<img src 2"images/rl .png"/ > 
<a href ="jxal .html" ><img src ="images/r02 .png"/ ></a> 
<a href ='wksp.html" ><img src ="images/r04 .png"/ ></a> 
<a href 2"f1jt.html" ><img src 2"images/r03.png"/ ></a> 
<a href ="ftjs.html" ><img src ="images/r05.png"/ ></a> 
<a href ="zycs.html" ><img src 2"images/r06.png"/ ></a> 
<a href ="hdpt .html" ><img src ="images/r07 .png"/ ></a></div> 
</div> 
</div> 


<! - -风采 剪影 --> 
<div id="main?2" > 
<div id="fc"> 
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<img src 2"images/fc.png"/ > 
<marquee scrollamount ="3" scrolldelay ~"100" direction ~"left" width ="1000™" 
height ="150" > 
<img src —"images/9.png" width —"150" height —"150"/ > 
<img src ="images/3.jpg" width ="150" height —"150"/ > 
<img src ="images/4.jpg" width ="150" height ="150"/ > 
<img src ="images/5.jpg" width ="150" height ="150"/> 
<img src ="images/6.jpg" width ="150" height ="150"/> 
<img src ="images/7.jpg" width ="150" height ="150"/ > 
<img src ="images/8.jpg" width ="150" height ="150"/> 
</marquee > 
</div> 
</div> 
</div> 
<div class ="clear"> 


<! - -版 权 所 有 信息 --> 
<footer > 
<img src 2"images/u14.png" width ="1038" height =79"/ > 
</footer > 
</div> 
</body > 








(4) 保存 文件 。 按 Ctrl +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 。 
2) 设置 CSS 样式 属性 
(1) 指定 在 HTML 页 面 中 引入 CSS 样式 表 的 方法 ,这 里 使 用 内 榜样 式 ,在 * < head > 


</head > "标签 对 之 间 添 加 以 下 代码 。 





<style type ="text/css" > 
二 == 
-—> 

</style> 





(2) 设置 栏目 样式 ,包括 设置 宽度 和 定位 等 ,标签 对 之 间 输 入 以 下 代码 。 








<style type ="text/css" > 
be 
margin:0; 
border:0; 
font -size:12px; 
font -family: "微软 雅 黑 "; 
} 
11{ 
width:1022px; 
margin:0 auto; 
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heager{ 
width:1005px; 
height :380px; 
margin:0 auto; 

#h{ 
width:1005px; 
height:40px; 
background -color: 碟 737037 
background -repeat:no -repeat; 
clear:both; 
margin:0 auto; 

} 

#h nav af 
float:left; 
width:90px; 
margin -left:30px; 
text -align:center; 
font -size:16px; 
line height:2 .5em; 
Color:#FF; 
text -decoration:none; 
display:block; 

¥ 

hh nav a:Hover{ 
color: #C6; 
font -size:14px; 

} 

ain{ 
width:1005px; 
height:652px; 
margin -top:20px; 
margin -left:20px; 

+ 

县 eft{ 
width:730px; 
height:455px; 
float:left; 

} 

县 eftl { 
width:361px; 
height :225px; 
float:left; 

} 

二 eftl] af 
text -decoration:none; 
color: 拍 00; 

} 

航 eftl a:hover{ 
Color: 攻 907 
font weight:bold;} 
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和 eftl pf 
text -indent :2em; 
line height:2em; 
padding -left :10px; 
pagdding -right:10px; 

. 

和 efL ul li{ 
padding top:10px; 
pagdding -left :15px; 
border -bottom:#CC lpx dashed; 
list -style type:none; 
line height:3em; 

} 

和 eftl span{ 
font -size:12px; 


Padding -left :40px; 

} 

#ight{ 
width:257px; 
height :445px; 
float:left; 

} 

#1 img{ 
margin -left:35px; 
margin -top:10px; 
line height :2em; 

} 

doainl{ 
width:1005px; 
height:460px; 

} 

ain2{ 
width:1005px; 
height:190px; 

} 

Ec{ 
width:1005px; 
height:160px; 

} 

footer{ 
width:1005Px7 
height:79px; 

} 

.Clear{ 
clear:both;} 

</style> 











(3) 保存 文件 。 按 Cul +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 ,如 
图 10-7 所 示 。 
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石家庄 信息 工程 职业 学 院 


特色 创新 单元 设计 











ne eh ere es 您 教学 案例 

五 个 单元 。 (1) 每 一 关 元 : 怒放 E0R。 如 坟 学 大和 条 
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图 10-7 课程 网 站 首页 效果 


【知识 归纳 】 


(1) 页 面 的 整体 布局 一 般 都 采用 标准 文档 流 方 式 , 即 默认 布局 方式 。 

(2) 当 页 面 中 有 栏目 在 同一 行 显示 时 ,可 以 采用 浮动 定位 法 或 绝对 定位 法 ,采用 这 两 
种 方法 的 元 素 都 脱离 了 标准 文档 流 。 

(3) 采用 浮动 定位 法 时 注意 对 普通 标准 文档 流 中 元 素 的 影响 。 

(4) 采用 绝对 定位 法 时 ,首先 要 找到 绝对 定位 的 祖先 元 素 即 参考 对 象 。 祖 先 元 素 必 
须 拥 有 定位 (position) 属 性 ,属性 值 为 relative 或 absolute。 其 次 要 设置 绝对 定位 的 坐标 值 ， 
参考 点 是 祖先 元 素 4 个 顶点 中 的 任意 一 点 ,只 能 设置 两 个 值 为 水 平方 向 (left 或 right) 或 
垂直 方向 (top 或 bottom ) 。 
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(5) 当 页 面 中 元 素 按照 标准 文档 流 方式 布局 ,需要 对 自己 的 位 置 进行 调整 而 保留 原 
来 的 位 置 时 ,可 以 采用 相对 定位 。 在 使 用 相对 定位 时 ,参考 点 是 元 素 本 身 在 标准 文档 流 中 
的 位 置 , 坐 标 值 的 设置 原理 与 绝对 定位 相同 ,因此 在 使 用 相对 定位 时 无 论 是 否 进行 移动 ， 
元 素 仍然 占据 原来 的 空间 。 单 独 使 用 相对 定位 的 时 候 比 较 少 ,通常 是 结合 绝对 定位 法 使 
用 ,即将 相对 定位 元 素 作为 绝对 定位 的 祖先 元 素 使 用 。 





任务 10-2 课程 介绍 页 面 一 -CSS 
定位 属性 布局 


【知识 储备 】 


1. CSS 相对 定位 

相对 定位 是 一 个 非常 容易 掌握 的 概念 。 如 果 对 一 个 元 素 进行 相对 定位 ,可 以 通过 设 
置 该 元 素 的 垂直 或 水 平 位 置 ,让 其 相对 于 它 在 文档 中 的 初始 位 置 (在 标准 文档 流 中 的 位 
置 ) 进 行 移动 ,如 图 10-8 所 示 。 





图 10-8 包含 元 素 定位 


2，CSS 绝对 定位 

绝对 定位 元 素 的 位 置 相对 于 最 近 的 已 定位 的 祖先 元 素 。 如 果 元 素 没 有 已 定位 的 祖先 
元 素 ,那么 它 的 位 置 相对 于 最 初 的 包含 块 。 在 绝对 定位 中 ,标准 文档 流 中 其 他 元 素 的 布局 
就 像 绝 对 定位 的 元 素 不 存在 一 样 ,如 图 10-9 所 示 。 





图 10-9 定位 的 祖先 元 素 
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设置 为 绝对 定位 的 元 素 框 将 从 标准 文档 流 完 全 删除 ,元 素 原 来 在 标准 文档 流 中 所 占 
的 空间 会 被 关闭 ,就 好 像 该 元 素 原来 不 存在 一 样 。 另 外 ,元 素 在 绝对 定位 后 会 生成 一 个 块 
级 框 ,成 为 块 级 元 素 ,而 不 论 原 来 它 在 标准 文档 流 中 是 块 级 元 素 还 是 行内 元 素 。 

3. 元 素 的 堆 又 顺序 .溢出 和 剪裁 

1) 元 素 的 堆 秋 顺序 

由 于 绝对 定位 元 素 的 框 与 标准 文档 流 无 关 , 所 以 它们 有 可 能 覆盖 页 面 上 的 其 他 元 素 。 
可 以 通过 设置 z-index 属性 来 控制 这 些 框 的 堆 释 顺序 。z -index 属性 只 能 应 用 于 使 用 了 绝对 
定位 的 元 素 ,其 值 为 整数 ,可 以 是 正 数 也 可 以 是 负数 ,默认 值 为 0, 数值 越 高 则 堆 和 顺序 越 高 。 

2) 元 素 的 溢出 

overflow 属性 用 于 规定 当 内 容 溢 出 元 素 框 时 如 何 处 理 , 其 常用 的 属性 值 说 明 如 下 : 
visible 属性 值 表示 内 容 不 会 被 修剪 ,会 呈现 在 元 素 框 之 外 ;hidden 属性 值 表示 元 素 框 之 外 
的 内 容 会 被 修剪 ,修剪 掉 的 内 容 不 显示 ;scroll 属性 值 表示 元 素 框 之 外 的 内 容 会 被 修剪 ,但 
是 浏览 器 会 显示 滚动 条 以 便 查看 修剪 掉 的 内 容 ;auto 属性 值 表示 让 浏览 器 自动 处 理 被 修 
剪 掉 的 内 容 , 通 常会 显示 滚动 条 以 便 查看 。 

3) 元 素 的 剪裁 

clip 属性 用 来 剪裁 绝对 定位 元 素 , 它 可 以 为 元 素 块 定义 一 个 矩形 裁剪 框 ,裁剪 框 之 内 
的 区 域 会 显示 ,之 外 的 区 域 不 会 显示 或 根据 overflow 的 属性 值 来 处 理 。 


【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 10" 目 录 下 的 images 子 目录 。 

效果 文件 位 置 :“ 单 元 10” 目 录 下 的 kejj. html。 


【任务 实施 】 


制作 课程 网 站 中 的 课程 介绍 网 页 ,整个 网 页 分 为 3 个 部 分 , 即 头 部 (header) .主体 
(main) 和 尾部 (footer) 。 其 中 ,主体 部 分 分 为 左 侧 栏 目 介绍 和 快速 按钮 , 右 侧 为 内 容 部 分 ， 
如 图 10-10 所 示 。 








图 片 logo 
图 像 banner 











左 侧 栏目 右 侧 内 容 








版 权 所 有 信息 footer 
10-10 ”课程 网 页 结构 布局 
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1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 打开 “文件 "面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 kcjj. html 的 网 页 文档 。 
(3) 调整 网 页 结构 ,将 网 页 元 素 中 的 < div > 布局 设置 如 下 : 





<body > 
<div ida=all"> 
<header > 
<img src ="images/b01 .png"/ > 
<div id="dh" > 
nav> 
<a href ="index.html" > 首页 </a> 
<a href ="kcjj.html" > 课程 介绍 </a > 
<a href ="tscx.html" > 特色 创新 </a > 
<a href "dysj .html" 阅 元 设计 </a> 
<a href ="zzss.html" 湖 织 实施 </a> 
<a href jxkj .html" 汗 学 课件 </a > 
<a href "zxkt .html" > 在 线 课堂 </a> 
<a href ="help.html" > 帮助 wa > 
</nav > 
</div> 
<img src 2"images/b3.png" width ="1005" height ="255"/ > 
</header > 
<div class ="clear" ></div > 
<div id=main" > 
div id="left" > 
<div id—"left1"> 
课程 介绍 
</div> 
<div id—"left2" > 
<br/ > 
< ><a href "kcjj.html" > 课程 定位 </a></p> 
< ><a href ="kcjj -tx.html" > 课程 目标 </a></p> 
< ><a href="kcjj -mb.html" 濑 学 内 容 wa ><br/ > 
<br/ ><table width ="200" border 2"1" > 
<tr> 
<td > <img src "images/r1 .png" width ="110" height ="33"/ ></td> 
</tr> 
<tr> 
<td align +"center" valign —"middle" ><a href —"jxal .html" > <img src "images/ 
401 .png" width ="80" height ="68"/ ></a></tda> 
<td align +'center" valign middle" ><a href J'wksp.html" > <img src "images/ 
402 .png" width ="80" height ="68"/ ></a></td> 
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</tr > 

<tr> 
<td align "center" valign "middle" ><a href 一 jxal.html" 辣 学 案例 
</a></td> 
<td align "center" valign "middle" ><a href "wksp.html" > 微 课 视 频 
</a></td> 

</tr> 

<tr> 
<td align ="center" valign 2'middle" ><a href 2"fljt.html" ><img src ="images/ 
403.png" width ="80" height ="68"/ ></a></td> 
<td align ="center" valign "middle" ><a href 3"ftjs.html" > <img src ="images/ 
404.png" width ="80" height ="68"/ ></a></td> 

</tr> 

<tr> 
<td align ="center" valign "middle" ><a href 二 "fljt.html" > 法 律 讲堂 
</a></td> 
<td align ="center" valign =middle" ><a href "ftjs.html" > 法 条 检索 
</a></td> 

</tr> 

<ET > 
<td align "center" valign 2'middle" ><a href 2"zycs.html" ><img src = "images/ 
405.png" width ="80" height ="68"/ ></a></td> 
<td align 2"center" valign 2'middle" ><a href ="hdpt .html" > <img src 2"images/ 
406.png" width ="80" height ="68"/ ></a></td> 

</tr> 

E> 
<td align "center" valign 2"middle" ><a href "zycs.html" > 作业 测试 
</a></td> 
<td align "center" valign "middle" ><a href "hdpt.html" > 互动 平台 
</a></td> 

</tr > 

</table > 

</p> 

</div> 

</div> 

<div id="right" > 

div id=rl"> 


课程 定位 
<span class "wz" > 当前 位 置 : 网 站 首页 ggt; ggt; 课 程 介绍 ggt; ggt; 课 程 定位 
</span> 

</div> 


<div id="r2" > 
< ><img src ~"images/kcjs 1 .jpg"/></p> 
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</div> 

</div> 
</div> 

<div class >"'clear" ></div> 

<footer > 

<img src ="images/u14 .png" width ="1038" height ="79"/ ></footer > 
</div> 
</body > 





(4) 保存 文件 。 按 Ctrl +S 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 。 
2) 设置 CSS 样式 属性 
(1) 指定 在 HTML 页 面 中 引入 CSS 样式 表 的 方法 ,这 里 使 用 外 部 样式 表 。 


<link href ="sl .css" rel ="stylesheet" type ="text/css"/> 


(2) 设置 栏目 样式 ,包括 设置 宽度 和 定位 等 ,在 标签 对 之 间 输 入 以 下 代码 。 








| 

margin:0; 

border:0; 

font -family: "微软 雅 黑 "; 
} 
11{ 

width:1022px; 

margin:0 auto; } 
header{ 

width:1005px; 

height :380px; 

margin:0 auto; } 
dh{ 

width:1005px; 

height :40px; 

background -color: 闯 737037 

background -repeat:no -repeat; 

clear:both; 

margin:0 auto; } 
#h nav af 

float:left; 

width:90px; 

margin -left:30px; 

text -align:center; 

font -size:16px7 

line height:2.5em; 

Color:#FF; 

text -decoration:none; 

display:block; 
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lh nav a:Hover{ 
color: C6; 
font -size:14px7 
main{ 
width:1000px; 
height :716px; 
margin top:20px; 
margin -left:20px; 
} 
eft{ 
width:212px; 
height :650px; 
float:left; 
background -image: url (images/hx0 .png); 
border: lpx; 
background -repeat: no -repeat; 
background -position: bottom right; 
} 
eft tablef 
border :2px #96 solid; 
border -radius:15px; } 
县 eftl1{ 
width:198px; 
height :44px; 
background -image:url (images/red.png); 
font -size:18px; 
Color:é#FF; 
text -align:center; 
padding -top:20px; 
} 
eft2{ 
line -height :2em; 
text -align:center; 
} 
县 eft2 af 
text -decoration:none; 
color: 丰 367} 
#ight{ 
width:740px; 
height :688px; 
float:left; 
margin -left: 10px; 
border -bottom: $99 lpx dashed; 
margin -top: 20px; 


#1{ 
font -size:12px; 
color:€*00; 
width:640px; 
height :45px; 
border -Pottom:1px #CC dashed; 
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float:right; 
pagdding -right :20px; 
Padding -bottom: 20px; 
#2{ 
text -align:center; 
text -indent :2em; 
pagding top:15px;} 
footer{ 
width:1005px; 
height:79px; 
} 
.Clear{ 
clear:both;} 











(3) 保存 文件 。 按 Ctrl +S 快捷 键 保 存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 ,如 
图 10-11 所 示 。 


Cd 





WW 尖 
课本 目标 
款 学 内 容 
二 渤 程 定位 
© vase | 产 汪 法 是 会 计 专 重 的 东 业 基础 课 ， 先 外 会计 法 律 制度 基础 上 华 习 


么 济 渤 ， 为 后 线 学 习 财 务 会 计 及 其 他 省 业 训 做 好 如 而 随 备 。 
四 








10-11 课程 网 站 课程 介绍 页 面 


146 


单元 10 校园 课程 类 网 站 一 -CSS 定位 布局 





【知识 归纳 】 


i 


参见 任务 10-1 的 “知识 归纳 ”。 


任务 拓展 


制作 如 图 10-12 所 示 网 页 ,素材 参照 本 单元 的 文件 夹 。 





国家 旅游 胜地 四 十 佳 






九 守 沟 黄龙 位 于 四 川 洁 阿 贡 攻 族 芜 
族 自 党 区 ， 是 我 国 公布 的 第 一 批 国家 如 
重点 风 具 名 胜 区 。1990 年 ， 九 赛 沟 被 列 
为 “中 国旅 游 胜地 四 十 佳 "之 苗 
了 解 更 多 

梦幻 世界 

1992 年 12 月 内 由 联合 国教 科 文 组 织 
批准 ， 从 此 登 上 世界 旅游 的 宝座 ， 成 为 
中 外 游客 向 往 的 神奇 的 “到 幻 世界 ”。 
九寨 沟 被 其 为 “ 瑟 仙 撤 ” 和 “童话 
世界 ” 
了 解 更 多 














设 为 首页 | 加 入 收藏 | 联系 我 


7x24 时 旅 兴 报 名 专 丝 : T7 69-81866 58888 
景点 指南 





网 站 首页 基本 概况 人 文风 俗 识 游 须知 








九条 沟 著 龙 位 于 四 川 | 者 阿 坝 基 放 芜 族 自 泊 区 ， 是 我 国 公布 交往 一 批 国家 绢 重点 风景 名 胜 区 。1990 年 ， 
九 赛 沟 被 列 为 “中 国 浓 游 胜地 四 十 佳 ”之 首 ，!991 年 禄 列 入 联合 国人 世界 风景 名 录 9 ，1992 年 12 月 又 由 
联合 国教 科 文 组 织 批准 ， 正 式 列 入 《世界 自然 事 产 名 录 站 ， 从 此 登 上 世界 旅 苗 的 宝座 ， 成 为 中 外 游客 向 往 
的 神 商 的 “ 葬 幻 世界 ”。 

因 罗 内 分 布 着 9 个 苞 族 村 赛 而 得 名 ， 海 换 2000*3000 米 ， 属 高 山 深谷 破 航 盐 埋 塞 地 魄 ， 以 玛 老 《高 山 戎 
激 )、 释 漫 、 彩 状 、 直 贬 、 藏 情 “五绝 ”驰名 中 外 ， 被 葡 为 “ 例 仙 措 ” 和 “重活 世界 ”。 九 守 沟 特别 商 
丽 ， 国 家 中 唯一 黎 得 “世界 自然 延 产 ”的 “重活 世界 ”> 

九 村 沟 的 山水 形成 于 第 四 世纪 去 冰川 8 撞 8， 海 所 在 2000 ~ 3200 米 ， 现 保存 着 大 量 第 四 世纪 十 冰川 
遗迹 。 九 塞 沟 的 地 下 水 富 含 大 量 的 瑟 琶 后 质 ， 湖 底 、 涉 埋 、 淹 图 水 边 均 可 见 乳白色 碳酸 丘 形 成 的 结晶 体 ， 
来 自 雪 山 、 森 林 * 

九 村 沟 的 活水 泉 又 异常 洁 争 ， 加 之 梯形 杖 的 湖泊 层 层 过 涉 ， 其 水 色 全 加 透明 ， 和 见 度 高 达 20 米 。 邢 
海 、 亚 温 、 彩 林 、 雪 峰 、 藏 情 ， 被 举 为 九寨 汐 “ 五 绝 ”， 水 乳 交融 ， 美 不 胜 收 。 现代 肖 草 人 九 赛 沟 》 

诗 : “让 眼 层林 彩 地 渤 ， 鱼 游 云 头 乌 滞 欢 ; 飞 温 巫 落 操 面 来 ， 九 寒 山水 扬 海 天 ”给 予 真实 诠释 。 
万 史上 居于 南 丝 网 之 路 的 绎 途 ， 各 族人 民 在 传承 和 劳作 之 中 留 下 了 宝贵 的 文化 遗产 ， 素 有 "民歌 过 局 
多 、 研 琶 之 乡 、 情歌 之 乡 ”的 美誉 。 





九寨 沟 


jiuzhaigou.com 


日 九 周 旅游 景点 


图 10-12 ”网 页 预览 效果 


则 箱 : iiuzhaigoualt3. com 
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单元 11 多 肉 植物 商城 一 “JavaSaipt 应 用 


JavaScript 早期 是 由 Netscape 公司 研发 出 来 的 一 种 在 Netscape 浏览 器 上 执行 的 程序 
语言 。 它 不 仅 包含 数组 对 象 .数学 对 象 , 还 包含 一 般 语言 所 包含 的 操作 数 ,控制 流程 等 结 
构 组 件 。 利 用 JavaScript 设计 出 交互 式 的 网 页 内 容 不 能 单独 执行 ,必须 由 浏览 器 或 服务 器 
执行 。 从 结构 上 来 说 ,JavaScript 是 一 种 基于 对 象 和 事件 驱动 的 安全 脚本 语言 ,使 用 它 的 
目的 是 起 到 与 Web 客户 进行 交互 的 作用 ,从 而 可 以 开发 客户 端的 应 用 程序 等 。 

教学 目标 : 

。 了 解 JavaScript 的 特点 。 

。 掌握 在 页 面 中 添加 JavaScript 脚本 的 方法 

。 掌握 JavaScript 脚本 语言 的 数据 类 型 和 变量 。 

e 了 解 JavaScript 脚本 语言 的 事件 。 


任务 11-1 多 肉 植物 图 蔡 换 一 一 JavaSaipt 
图 片 切换 特效 


【知识 储备 】 
1. JavaScript 语言 的 特点 


JavaScript 是 脚本 编程 语言 ,具有 简单 性 ,安全 性 动态 性 、 跨 平台 性 等 特点 ,如 
图 11-1 所 示 为 一 个 JavaScript 程序 的 运行 结果 
例如 ,下 面 是 一 个 简单 的 JavaScript 程序 。 


<html > 
<head > 
<title 欢迎 学 习 Javascript 语言 </title > 
</head > 
<body > 


<script language ="JavaScript" > 
alert ("欢迎 学 习 Javascript 语言 !"); 
</script > 
body > 
</html > 
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文件 下) ” 辆 辑 区 ) 查看 如 收藏 如 工具 Ct) 帮助 人 0 
QE -日 - 国 国 镶 | 有 过 六 Wax @| 合 -如 团 - 


地 址 加 ) | 乔 ] D: febApp\JavaScript\Exanple4-1. htnl 





Hicrosoft Internet ExpN:rer 恬 | 


人 心 欢迎 学 习 JavaScript 语 言 1 


[| 





图 11-1 一 个 JavaSeript 程序 


2. JavaScript 基础 

变量 是 程序 设计 语言 的 最 基本 元 素 。 变 量 可 以 理解 为 一 个 存放 信息 或 数据 的 容器 。 

JavaScript 语言 是 一 种 弱 类 型 语言 , 即 程序 中 所 用 到 的 每 个 存储 单元 ( 即 变量 ) 不 必 指 
明 其 数据 类 型 。 

(1) 数值 类 型 。 数 值 类 型 是 JavaScript 语言 中 比较 常用 的 类 型 。 在 JavaScript 语言 中 
数值 类 型 既 可 以 表示 整数 ,也 可 以 表示 实数 。 这 与 其 他 编程 语言 可 能 不 同 。 

(2) 逻辑 类 型 。 逻 辑 类 型 主要 用 于 逻辑 运算 ,因此 逻辑 类 型 的 变量 只 有 两 个 值 : true 
或 false。 

(3) 字符 串 类 型 。 一 个 字符 串 类 型 常量 是 由 单 引 号 或 者 双 引 号 包围 的 多 个 字符 组 成 
的 ,注意 这 里 的 引号 指 的 是 英文 引号 。 

(4) 未 定义 类 型 。 未 定义 类 型 又 称 为 undefined 类 型 ,表示 一 个 变量 还 没有 赋予 任何 初 值 。 

(5) 各 种 运算 符 。 包 括 以 下 几 类 。 

@ 算术 运算 符 : 算术 运算 符 主要 用 于 数据 计算 ,其 操作 数 一 般 为 数值 类 型 ,返回 结 
果 也 是 一 个 数值 类 型 。 在 JavaScript 语言 中 算术 运算 符 又 可 以 分 为 单 日 算术 运算 符 和 双 
目 算术 运算 符 。 运 算 所 需 变量 为 一 个 的 运算 符 叫 作 单 目 算术 运算 符 , 运算 所 需 变 量 为 两 
个 的 运算 符 叫 作 双 目 算术 运算 符 。 

@ 赋值 运算 符 : 赋值 运算 符 用 于 将 一 个 数据 赋予 一 个 变量 、 属 性 或 引用 。 其 中 数据 
可 以 是 变量 ,也 可 以 是 表达 式 。 

@ 关系 运算 符 : 关系 运算 符 也 就 是 比较 运算 符 ,返回 值 是 布尔 型 的 真 (true) 或 假 
(false ) 。 

@ 逻辑 运算 符 . 逻辑 运算 符 主要 用 于 逻辑 判断 ,主要 包括 逻辑 与 .逻辑 或 和 逻辑 非 。 

@) 位 运算 符 : 位 运算 符 用 于 对 操作 数 进行 位 运算 。 在 计算 机 中 ,信息 是 以 二 进 制 形 
式 存 储 的 。JavaScript 中 位 运算 符 就 是 专门 针对 二 进 制 数据 运算 的 。 

3. 基本 语句 

1) 选择 语句 

选择 语句 即 分 支 语句 ,主要 用 于 根据 某 个 条 件 来 决定 哪个 流程 被 执行 。 当 布尔 型 表 
达 式 的 值 为 rue 时 ,执行 语句 1。 和 否则 跳 过 语句 1 , 若 有 else 语句 , 则 执行 语句 2。 
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(1) 站 语句 。 站 语句 的 格式 如 下 : 


if( 布 尔 型 表达 式 ) 
{ 
语句 1; 
} 
else 
{ 
语句 2; 
} 
(2) switch 语句 。switch 语句 可 以 一 次 将 表达 式 的 值 与 多 个 值 进 行 比 较 ,switch 语句 
的 格式 如 下 : 
switch (表达 式 1) 
{ 
case 值 1: 
语句 1; 
break; 
case 值 2: 
语句 2; 


break; 


Gefault: 
默认 语句 ; 
break; 


} 


switch 语句 将 表达 式 1 的 值 分 别 与 case 中 的 多 个 值 进 行 比较 , 若 有 相符 的 选项 , 则 执 
行 相应 的 语句 块 ;否则 就 执行 默认 语句 块 。 

2) 循环 语句 

当 需 要 进行 大 量 重复 操作 时 ,通过 循环 语句 可 以 使 代码 更 简洁 。JavaScript 语言 中 提 
供 了 以 下 循环 控制 语句 : while 语句 .do-while 语句 for 语句 等 。 

(1) while 语句 。while 语句 执行 一 个 语句 或 语句 块 ,直到 条 件 表达 式 为 false 为 止 。 
while 语句 的 格式 如 下 : 

while (条 件 表达 式 ) 

| 循环 代码 ; 

} 

break 等 语句 可 以 将 控制 传递 到 循环 之 外 ,从 而 终止 while 循环 。 若 需要 将 控制 传递 
给 下 一 个 循环 但 不 退出 循环 ,可 以 使 用 continue 语句 。 

(2) do-while 语句 。do-while 语句 会 根据 条 件 表 达 式 的 值 有 条 件 地 执行 其 中 的 循环 
代码 。do-while 循环 非常 类 似 于 while 循环 。 

do-while 语句 的 格式 如 下 : 


do 
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{ 
循环 代码 ; 
} while (条 件 表达 式 ) 
提示 : do-while 循环 与 while 循环 的 重要 区 别 是 ,while 循环 的 布尔 测试 是 在 循环 刚 开 
始 时 进行 的 ,而 do-while 循环 的 布尔 测试 是 在 最 后 进行 的 ,这 样 do-while 循环 中 的 循环 语 
句 将 至 少 会 执行 一 次 。 
(3) for 语 句 。for 语句 重复 执行 一 个 语句 或 语句 块 ,直到 指定 的 循环 变量 超过 循环 
条 件 为 止 。for 语句 是 最 常 使 用 的 循环 语句 。 
for 语句 的 格式 如 下 : 
for (循环 变量 初始 化 ;循环 条 件 ;循环 操作 ) 
{ 
循环 代码 
for 语句 的 执行 过 程 说 明 : 中 运行 初始 化 语句 ,为 循环 变量 赋 一 个 初始 值 ; @ 判 断 循 
环 条 件 ,决定 是 否 进入 循环 ; @B) 若 进入 循环 ,执行 循环 语句 ,然后 转 @)。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 内 的 素材 文件 夹 。 
实例 素材 位 置 :“ 单 元 11 "目录 下 的 “文字 . tt" 和 images 子 目 录 。 
效果 文件 位 置 :“ 单 元 11" 目录 下 的 m. html。 


【任务 实施 】 


在 网 页 中 使 用 JavaScript 实现 图 片 的 切换 效果 ,如 图 11-2 所 示 。 





图 11-2 ”JavaSeript 图 片 切换 
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JavaScript 代码 片段 可 以 简化 成 以 下 代码 。 





} 





<script > 
window.onload =function () { 


</script > 


Var oDiv =document .getElementById ("pic"); 
Var oImg -document .getElementsByTagName ("img") [0]; 
Var oP -document .getElementsBYTagName ("p") [0]; 
Var oNum =document .getElementsByTagName ("span") [0]; 
Var oUl -document .getElementsByTagName ("ul") [0]; 
Var aLi =0U01 .getElementsByTagName ("1i"); 
Var arrUrl =var arrUrl =[" images/l. png"," images/2.png"," images/3.png"," 
images/4 .png", "images/5.png"]; 
var arrText =[" 植 物 1" "植物 2" "植物 3" "植物 4" "植物 5"]; 
for (var i -0;i <arrUrl.length;i ++) { 
cU1.innerHTML +=" <li></li>"; 


} 
// 初 始 化 
var num-07 
function fnTab (){ 
oImg.src arrUr] [num] 
oP.innerHIML =arrText [num]; 
oNum. innerHIML 3 num +'/" tarrUrl .length; 
aLi [num] .className =""; 
} 
fEnTab ()7 
for (i 0;i <aLi.length;i+}) { 
aLi [i] .index =i; 
aLi [i] .onclick=function (){ 
num this.index; 
fnTab () 7 





aLi [num] .className ="active"; 
} 








【知识 归纳 】 


有 3 个 位 置 可 用 于 放置 JavaScript 代码 ,并 且 一 个 HTML 文档 中 可 以 同时 存在 这 
3 种 方式 。 中 位 于 页 面 的 <body > 部 分 ,这 些 脚本 将 在 页 面 加 载 时 运行 ; @ 位 于 页 面 的 
<head > 部分, 这些 脚 本 将 在 事件 触发 它们 时 被 调用 ; @ 位 于 外 部 文件 中 ,如 果 链 接 放 置 
在 <head > 部 分 , 则 脚本 的 处 理 方式 与 将 其 放置 在 文档 头 部 并 等 待 事件 触发 时 相同 ;如 果 
链接 放置 在 <body > 部 分 , 则 它 的 行为 类 似 于 脚本 放置 在 文档 主体 中 ,并 在 页 面 加 载 时 执 
行 。 对 于 大 多 数 功能 ,趋向 于 使 用 外 部 JavaScript 文件 ,并 且 将 < script > 代码 放置 在 文档 





的 头 部 。 
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任务 11-2 ”美丽 鼠标 影 一 鼠标 类 特性 


【知识 储备 】 


1. JavaScript 事件 概述 

通过 多 种 方式 与 浏览 器 载 入 的 页 面 进行 交互 ,事件 是 交互 的 桥梁 。Web 应 用 程序 开 
发 者 通过 JavaScript 脚本 内 容 内 置 和 自 定义 的 事件 来 响应 用 户 的 动作 ,就 可 以 开发 出 更 有 
交互 性 ,动态 性 的 页 面 。 

JavaScript 事件 可 以 分 为 几 种 不 同 的 类 别 ,最 常用 的 类 别 是 鼠标 事件 ,然后 是 键盘 事 
件 和 表单 事件 。 

(1) 鼠标 事件 : 分 为 两 种 ,追踪 鼠标 当前 位 置 的 事件 ( mouseover ,mouseout ) ;追踪 鼠 
标 被 单 击 的 事件 ( mouseup ,mousedown ,click ) 。 

(2) 键盘 事件 : 负责 追踪 键盘 的 按键 何 时 以 及 在 何 种 上 下 文中 被 按 下 。 与 鼠标 相 
似 ,3 个 时 间 用 来 追踪 键盘 ， keyup ,keydown keypress。 

(3) UI 事 件 : 用 来 追踪 用 户 何 时 从 页 面 的 一 部 分 转 到 另 一 部 分 。 例 如 ,使 用 它 能 知 
道 用 户 何 时 开始 在 一 个 表单 中 输入 。 用 来 追踪 这 一 点 的 两 个 事件 是 focus 和 blur。 

(4) 加 载 事 件 和 错误 事件 : 事件 的 最 后 一 类 是 与 页 面 本 身 有 关 。 如 加 载 页 面 事件 
load; 最 终 离 开 页 面 事件 unload。 另外 ,JavaScript 的 错误 使 用 error 事件 进行 追踪 。 

2. 事件 分 析 
事件 的 产生 和 响应 都 是 由 浏览 器 来 完成 的 ,而 不 是 由 HTML 或 JavaScript 代码 来 完成 
的 。 使 用 HTML 代码 可 以 设置 哪些 元 素 响 应 什么 事件 ,使 用 JavaSeript 代码 可 以 告诉 浏览 
器 怎么 来 处 理 这 些 事件 。 然 而 ,不 同 的 浏览 器 所 响应 的 事件 有 所 不 同 , 相 同 的 浏览 器 在 不 
同 版 本 中 所 响应 的 事件 也 会 有 所 不 同 。 

1) click 事件 

click 事件 是 在 一 个 对 象 上 按 下 然后 释放 一 个 鼠标 按钮 时 发 生 , 也 会 发 生 在 一 个 控件 
的 值 改 变 时 。 

基本 语法 : onclick = 处 理 函数 或 是 处 理 语句 。 

示例 代码 : 


onclick ="javascript :window.print™" 


2) change 事件 

change 事件 通常 在 文本 框 或 下 拉 列 表 中 激发 。 在 下 拉 列 表 中 只 要 修改 了 可 选项 ,就 会 激 
发 change 事件 ;在 文本 框 中 ,只 有 修改 了 文本 框 中 的 文字 并 在 文本 框 失 去 焦点 时 才 会 被 激发 。 

基本 语法 : onchange = 处 理 函 数 或 是 处 理 语句 。 

示例 代码 : 


<input name >="textfield" type ="text" size 2"20" onchange =alert ("输入 搜索 内 容 ") > 
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3) select 事件 
select 事件 是 指 当 文 本 框 中 的 内 容 被 选中 时 所 发 生 的 事件 。 
基本 语法 : onselect = 处 理 函 数 或 处 理 语句 。 
4) focus 事件 
focus 事件 通常 是 指 得 到 焦点 并 放 在 了 网 页 中 的 对 象 之 上 。 


【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 11" 目 录 下 的 images 子 目录 。 

效果 文件 位 置 :“ 单 元 11" 目 录 下 的 js2. html 和 js3. html。 


【任务 实施 】 


制作 鼠标 跟随 效果 ,如 图 11-3 所 示 。 








图 11-3 鼠标 跟随 效果 


鼠标 跟随 效果 的 代码 如 下 : 





<!DOCTYPE html > 
<html > 
<head > 
<meta charset ="utf -8"/ > 
<title > 鼠标 跟随 效果 </title > 
<style > 
body {margin:0; padding:0} 
é#o_top{ 
width:30px; 
height :40px; 
pagdding:20px; 
font :14px/20px arial; 
text -align:center; 
background: 折 6c; 
position:absolute; 
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Cursor:pointer; 
Color:#ff 
$ 
</style> 
<script > 
Window.onload =function () { 
Var oTop -document .getElementById ("to top"); 
document .onmousemove =function (evt) { 
Var oEvent =evt || window.event; 
Var scrollleft =document .documentElement .scrollLeft | 
document .body .scrollLleft; 
Var scrolltop =document .documentElement .scrollTop || 
document .body .scrollTop; 
oTop.style.left =oEvent.clientX +scrollleft #0 +"px"; 
oTop.style.top =oEvent .clientY +scrolltop H0 +"px"; 
} 
} 
</script > 
</head > 
<body style ="height:1000px;" > 
<img src 2"images/1 .png" width ="225" height ="198" > 
<div id="to top" 瘦 标 跟随 </div > 
</body > 
</htm > 











【知识 归纳 】 


JavaScript 编程 中 常用 事件 以 及 事件 的 处 理 程序 。 事 件 驱动 程序 机 制 是 JavaSeript 程 
序 的 灵魂 ,广泛 应 用 于 其 他 编程 语言 中 ,可 以 让 用 户 在 浏览 页 面 的 前 提 下 ,可 以 与 页 面 进 
行 交 互 。 但 是 由 于 事件 的 产生 和 捕捉 都 与 浏览 器 息息相关 ,因此 ,不 同 的 浏览 器 所 支持 的 
事件 也 各 不 相同 。 





任务 11-3 图 片 变 换 一 一 滚动 图 片 效 果 


【知识 储备 】 


1. 事件 处 理 的 基本 概念 
在 大 多 数 浏览 器 中 都 还 定义 了 一 些 其 他 的 事件 ,这 些 事件 为 程序 带 来 了 很 大 的 便利 ， 
同时 ,也 使 程序 更 加 丰富 与 人 性 化 。 事 件 是 定义 了 用 户 与 Web 页 面 交 互 时 产生 的 各 种 操 
作 。JavaScript 是 基于 对 象 的 语言 。 基 于 对 象 的 基本 特征 就 是 采用 事件 驱动 。 通 常 鼠标 
或 热 键 的 动作 称 为 事件 ,而 由 鼠标 或 热 键 引发 的 程序 动作 , 称 为 事件 处 理 。 而 对 事件 进行 
处 理 的 程序 或 函数 , 称 为 事件 处 理 程序 。 
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2. 浏览 器 事件 

JavaScript 脚本 程序 是 在 浏览 器 上 被 执行 的 ,这 样 就 大 大 减轻 了 服务 器 的 负担 。 

(1) load 事件 。 在 弹出 一 个 提示 窗口 后 显示 版 权 或 欢迎 信息 ,弹出 密码 认证 窗口 来 
防止 非 授 权 的 访问 等 ,都 会 触发 load 事件 。 

(2) unload 事件 。unload 事件 发 生 于 用 户 在 浏览 器 的 地 址 栏 中 输入 一 个 新 的 URL ,或 
者 使 用 浏览 器 工具 栏 中 的 导航 按钮 ,使 浏览 器 试图 载 和 一 个 新 的 网 页 时 。 在 浏览 器 载 人 下 
一 个 新 网 页 之 前 ,会 自动 产生 一 个 unload 事件 ,通知 原 有 网 页 中 的 JavaScript 脚本 程序 。 
onunload 事件 的 句柄 同 onload 事件 的 句柄 ,刚好 构成 一 对 功能 相反 的 事件 处 理 模式 。 使 用 
onload 事件 的 句柄 可 以 初始 化 一 个 网 页 ,而 使 用 onunload 事件 的 句柄 则 可 以 结束 一 个 网 页 。 

(3) submit 事件 。submit 事件 在 完成 信息 的 输入 ,准备 将 信息 提交 给 服务 器 处 理 时 
发 生 。onsubmit 句柄 在 submit 事件 发 生 时 由 JavaScript 自动 调用 执行 。onsubmit 句柄 通 
常 在 标记 中 声明 。 


【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 11 "目录 下 的 “images\ 滚 动 图 片子 目录 。 

效果 文件 位 置 :“ 单 元 11 "目录 下 的 "滚动 图 片 " 子 目 录 下 的 js3. html。 


【任务 实施 】 
制作 如 图 11-4 所 示 的 图 片 向 左 和 向 上 滚动 的 效果 。 


合作 媒体 
Ws" | Yes | Ane | | Terma|| ‘| Oa | Bee | | A | 摔 
合作 媒体 


和 SONY| 





























图 114 图 片 向 左 和 向 上 滚动 的 效果 
图 片 向 左 滚动 效果 的 代码 如 下 : 





<script language ="javascript" type ="text/javascript" > 
Var ad speed 30; 
ad r.innerHIML =ad 1.innerHTML7 
finction ad Marquee() { 
if (ad r.offsetWidth -scroll logol .scrollLeft <=0) 
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scroll logol .scrollIeft -=ad 1.offsetWidth; 
else { 


Scroll logol .scrollleft ++; 


} 

Var ad mymar =setInterval (ad Marquee, ad speed) 

scroll logol .onmouseover =function () { 
ClearInterval (ad mymar); 

} 

scroll] logol .onmouseout =function () { 
ad mymar =setInterval (ad Marquee, ad speed); 

} 

</script > 





图 片 向 上 滚动 效果 的 代码 如 下 : 








<script language ="javascript" type ="text/javascript" > 
Var speed 30; 
Pic box b.innerHTML =pic box.innerHTML7 
function marquee2 (){ 
if (pic box b.offsetTop -scroll logo2.scrollTop <-0) { 
Scroll logo2 .scrollTop -=pic box.offsetHeight; 
else { 


Scroll logo2 .scrol1Top + 二 7 


} 

Var mymar2 =setInterval (marquee?, speed); 

scroll_ 10go2 .onmouseover =function() { 
clearInterval (mymar2); 

} 

scroll 10go02 .onmouseout =function() { 
mymar2 =setInterval (marquee2, speed); 








【知识 归纳 】 


网 页 


众所周知 ,JavaScript 是 动态 的 面向 对 象 的 编程 语言 ,具有 以 下 特点 : 中 丰富 Web 
的 功能 ; @ 丰 富 Web 界面; @@ 实 现 本 地 或 远程 存储 ; @ 实 现 分 布 式 网 络 应 用 的 前 


端 组 件 ,并 在 后 台 进行 数据 存储 管理 ; @@ 使 用 JavaScript 可 以 实现 完整 的 分 布 式 Web 应 


用 。 
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任务 拓展 


实现 简单 动态 效果 方法 ,完成 制作 交换 图 像 效 果 。 

在 Dreamweaver 中 使 用 “行为 " 面板 制作 交换 图 像 效 果 。 在 站 点 文件 夹 中 的 index. 
html 文档 中 单 击 “ 行 为 "面板 中 的 “添加 行为 "按钮 ,在 其 下 拉 菜 单 中 选中 “交换 图 片 ”, 选 
择 文件 夹 中 的 图 像 , 单 击 “ 确 定 " 按 钮 ,完成 交换 图 像 的 创建 。 打 开 “ 代 码 " 界 面 ,可 看 到 在 
网 页 中 添加 了 脚本 语言 。 
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设计 是 有 目的 的 策划 ,在 平面 设计 中 ,设计 师 需 要 用 视觉 元 素来 传播 其 设想 和 计划 ， 
用 文字 和 图 形 将 信息 传达 给 人 们 。 
平面 设计 的 分 类 有 很 多 ,如 形象 设计 字体 设计 书籍 装帧 设计 、 包 装 设计 ,海报 /招贴 
设计 等 ,有 多 少 需求 就 有 多 少 种 设计 ,这 其 中 还 存在 着 商业 设计 与 艺术 设计 。 

Photoshop 是 平面 设计 中 常用 的 软件 ,在 使 用 该 软件 之 前 应 对 平面 设计 的 一 些 基 础 理 
论 有 整体 的 认识 。 

教学 目标 : 

。 掌握 图 像 处 理 的 基础 知识 。 

。 灵活 使 用 图 像 处 理工 具 

。 掌握 基础 辅助 功能 的 应 用 。 





任务 12-1 海岛 旅游 胜地 一 -图 像 处 理 基础 


【知识 储备 】 


1. 图 像 处 理 的 基本 概念 

计算 机 绘图 分 为 两 大 类 一 一 矢量 图 像 与 位 图 图 像 。 

矢量 图 像 在 数学 上 定义 为 一 系列 由 线 连接 的 点 ,所 占用 的 磁盘 空间 相对 较 小 , 且 与 分 
辩 率 和 图 像 尺寸 无 关 。 矢 量 图 像 的 文件 大 小 主要 视图 像 的 复杂 程度 而 定 , 例 如 ,一 个 大 海 
报 , 上 面 只 勾勒 了 几 个 简单 的 图 像 ,而 一 张 邮票 ,上 面 有 比较 复杂 的 图 像 , 则 邮票 可 能 比 海 
报 占用 的 磁盘 空间 要 大 得 多 。 
位 图 图 像 又 称 为 点 阵 图 ,由 众多 不 同 颜色 的 像素 组 成 ,数码 照片 即 属于 位 图 图 像 。 位 
图 图 像 与 分 辨 率 有 关 , 因 此 ,如 果 在 屏幕 上 以 较 大 的 倍数 放大 显示 ,或 以 过 低 的 分 辨 率 打 
印 , 位 图 图 像 会 出 现 锯齿 边缘 。 

1) 图 像 大 小 

一 般 提 到 图 像 大 小 的 时 候 都 是 用 厘米 (em) 或 英寸 (inch ) 等 计量 单位 来 衡量 的 ,但 是 
在 计算 机 中 所 提 到 的 图 像 大 小 却 是 以 像素 (pixel ) 为 单位 来 衡量 的 。 
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2) 分 辩 率 

分 辨 率 是 指 在 单位 长 度 内 所 含 像素 的 多 少 。 通 常 大 家 会 认为 分 辨 率 就 是 指 图 像 的 分 
辩 率 ,而 实际 上 分 辩 率 有 很 多 ,包括 图 像 分 辩 率 .设备 分 辩 率 .屏幕 分 辨 率 ,位 分 辩 率 .输出 
分 辩 率 等 。 

(1) 色相 。 色 相 是 指 红 橙黄, 绿 , 蓝 .能 、 紫 等 色彩 的 总 称 , 而 黑 . 白 以 及 各 种 灰色 属 
于 无 色 系 。 色 相通 常 称 为 颜色 的 相貌 ,比如 ,红色 、 蓝 色 .绿色 它们 的 色相 是 不 同 的 。 

(2) 饱和 度 。 饱 和 度 是 指 颜色 的 鲜艳 程度 ,也 可 以 称 为 色彩 的 纯度 。 比 如 ,十 分 鲜艳 
的 红色 和 瞳 红色 的 饱和 度 是 不 同 的 。 饱 和 度 越 高 ,色彩 就 越 鲜艳 。 

(3) 明度 。 明 度 是 指 颜 色 的 明暗 程度 。 比 如 说 黄色 比 蓝 色 要 亮 一 些 。 

(4) 颜色 。 颜 色 则 是 综合 了 色相 .饱和 度 和 明度 这 3 项 ,有 时 也 称 为 色彩 。 当 色相 、 
明度 和 饱和 度 不 同时 ,产生 的 颜色 也 不 相同 。 可 见 光 中 的 大 部 分 颜色 都 可 由 红 ( Red) \ 绿 
(Green) 、 蓝 ( Blue) 三 基色 按 不 同 的 比例 混合 而 成 。3 种 光 以 相同 的 强度 混合 ,就 产生 了 
白色 。 而 完全 没有 光 , 在 人 眼看 来 则 是 黑色 。 

(5) 图 层 蒙 版 。 图 层 蒙 版 就 好 像 在 一 幅 画 上 面 撤 上 一 层 细 沙 。 细 沙 把 底 图 遮盖 住 ， 
它 就 相当 于 蒙 版 。 如 果 你 想 把 底 图 的 一 部 分 显现 出 来 ,就 可 以 用 手指 (相当 于 使 用 蒙 版 
时 的 画笔 , 且 前 景色 为 黑色 ) 把 细 沙 划 去 一 些 ;如 果 想 再 把 显 出 来 的 一 部 分 盖 住 , 则 又 可 
以 在 上 面 撒 上 一 层 细 沙 ,相当 于 前 景色 设 为 白色 ,用 画笔 涂抹 。 

2. 几 种 常见 图 像 格式 

。 PSD: 这 是 Photoshop 软件 自身 专用 的 格式 。 

JPEG: 这 是 一 种 有 损 压 缩 格 式 , 它 是 所 有 压缩 格式 中 最 卓越 的 ,JPEG 图 像 在 打开 
时 自动 解压 缩 。 高 等 级 的 压缩 会 导致 较 低 的 图 像 品 质 , 低 等 级 的 压缩 则 会 产生 较 
高 的 图 像 品 质 , 这 就 是 以 磁盘 空间 大 小 为 代价 的 。 

GIF: GIF 格式 的 文件 是 8 位 图 像 文件 ,几乎 所 有 的 软件 都 支持 该 文件 格式 。 这 
种 格式 的 文件 大 多 用 于 网 络 传输 ,可 以 将 多 张 图 像 存 为 一 个 文档 ,形成 动画 
效果 。 

BMP: 这 是 Bitmap 的 缩写 , 它 是 微软 公司 的 自身 图 像 格式 ,可 以 用 于 绝 大 多 数 
Windows 下 的 应 用 程序 。 

PNG: PNG 格式 是 Netscape 公司 开发 出 来 的 一 种 无 损 压缩 的 网 页 格式 。PNG 格 
式 将 GIF 和 JPEG 最 好 的 特征 结合 起 来 , 它 支持 24 位 真 彩色 ,无 损 压 缩 ,支持 透明 
和 Alpha 通道 。PNG 格式 不 完全 支持 所 有 浏览 器 ,所 以 在 网 页 中 使 用 要 比 GIF 和 
JPEG 格式 使 用 少 得 多 ,但 随 着 网 络 的 发 展 和 互联 网 传输 速率 的 改善 ,PNG 格式 将 
是 未 来 网 页 中 使 用 的 一 种 标准 图 像 格式 。 

3. 启动 和 退出 Photoshop 

通常 启动 Photoshop 方法 有 以 下 两 种 。 中 单 击 屏幕 左下 角 的 “开始 "按钮 ,然后 在 弹 
出 的 快捷 菜单 中 选择 “程序 " 子 菜单 中 Adobe Photoshop 命令 ; 加 双击 桌面 上 的 Photoshop 
启动 快捷 方式 图 标 。 如 果 桌 面 上 没有 了 Photoshop 启动 快捷 方式 图 标 , 可 以 打开 了 Photoshop 
所 在 的 文件 夹 窗口 ,然后 用 鼠标 左 键 将 Photoshop. exe 拖 动 到 桌面 上 即 可 。 

退出 Photoshop ,关闭 程序 的 方法 有 以 下 4 种 。 中 单 击 程序 窗口 右上 角 的 关闭 按钮 ; 
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@@ 选 择 * 文 件 "一 “退出 "命令 ; @ 按 Alt + F4 快捷 键 或 Chl + Q 快捷 键 ; @ 双 击 窗口 左上 
角 图 标 。 

4. 了 Photoshop 工作 界面 
Photoshop CC 工作 界面 如 图 12-1 所 示 。 


菜单 栏 
选项 栏 


工具 栏 





图 12-1 Photoshop CC 工作 界面 


当 要 使 用 某 个 菜单 命令 时 ,只 需 将 鼠标 移 到 菜单 名 上 单 击 , 即 可 弹出 下 拉 菜 单 , 可 从 
中 选择 所 要 使 用 的 命令 。 对 于 菜单 来 说 ,有 以 下 的 约定 规则 : 菜单 项 呈现 暗 灰 色 , 则 说 
明 该 命令 在 当前 编辑 状态 下 不 可 用 ; @ 菜 单项 后 面 有 箭头 符号 , 则 说 明 该 菜单 项 还 有 子 
菜单 ; (3) 菜单 项 后 面 有 省 略 号 , 则 单 击 该 菜单 将 会 打开 一 个 对 话 框 ; @ 如 果 在 菜单 项 的 
后 面 有 快捷 键 ,那么 可 以 直接 使 用 快捷 键 来 选择 菜单 命令 ; (5) 要 关闭 所 有 已 打开 的 菜单 ， 
可 再 次 单 击 主 菜单 名 ,或 者 按键 盘 上 的 Alt 键 。 要 逐 级 向 上 关闭 菜单 ,可 按 Esc 键 。 


【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 12" 目录 下 的 images 子 目录 。 

效果 文件 位 置 :“ 单 元 12" 目 录 下 的 “海岛 旅游 . psd” 和 “海岛 旅游 . jpg”。 


【任务 实施 】 
著名 的 海岛 旅游 胜地 ,在 设计 思路 上 ,应 挑选 出 迷人 的 海岛 风光 照片 作为 背景 图 ,以 


表现 出 旅游 景区 的 真实 美景 ;通过 多 张 度假 娱乐 项 目 图 片 表现 出 旅游 地 的 景色 和 娱乐 设 
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施 ,展示 出 轻松 自然 .多 姿 多 彩 的 生活 理念 ;通过 不 同 的 色 块 和 旋转 文字 介绍 宣传 主题 及 
旅游 地 的 相关 信息 ,体现 出 活泼 .自然 .动感 的 一 面 ,如 图 12-2 所 示 为 海岛 旅游 胜地 。 





图 12-2 海岛 旅游 胜地 


使 用 “色彩 平衡 "命令 改变 图 片 的 颜色 ,使 用 图 层 蒙 版 和 画笔 工具 制作 图 片 合成 效 
果 , 使 用 矩形 选 框 工 具 和 文字 工具 制作 宣传 语 。 具 体操 作 步 骤 如 下 。 

1) 制作 背景 图 像 

(1) 打开 素材 01. psd 和 02. psd 文件 ,选择 移动 工具 ,将 素材 拖 动 到 图 像 窗口 右 侧 ， 
在 图 层 中 生成 新 的 图 层 。 

(2) 单 击 图 层 下 方 的 “添加 图 层 蒙 版 按钮 ,为 图 层 添加 蒙 版 。 选 择 画 笔 工 具 , 在 工 
具 选 项 栏 中 单 击 画 笔 选项 右 侧 按钮 ,弹出 “画笔 "面板 ,选择 需要 的 画笔 形状 ,设置 黑色 为 
前 景色 ,在 人 物 图 像 周 围 的 海水 上 进行 涂抹 , 擦 除 不 要 的 图 像 , 效 果 如 图 12-3 所 示 。 





图 12-3 蒙 版 图 像 
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2) 制作 照片 图 像 

(1) 新 建 图 层 。 选 择 矩 形 选 框 工 具 , 在 图 形 窗口 的 下 方 绘制 选区 ,填充 为 白色 ,取消 

(2) 按 Chl +T 快 捷 键 ,在 图 形 周围 出 现 变换 框 ,将 鼠标 光标 放 在 变换 框 的 控制 手柄 
附近 ,光标 变 为 旋转 图 标 , 拖 动 鼠标 将 图 形 旋转 至 适当 角度 , 按 Enter 键 确认 操作 ,效果 如 
图 12-4 所 示 。 





图 124 白色 矩形 杠 


(3) 单 击 “ 图 层 " 面 板 下 方 的 “添加 图 层 样式 "按钮 ,在 弹出 的 快捷 菜单 中 选择 “ 投 
影 " 命 令 , 在 弹出 的 对 话 框 中 进行 设置 , 单 击 “ 确 定 "按钮 ,效果 如 图 12-5 所 示 。 





混合 选项 
一 常规 混合 


湿 人 模式 D): 正常 二 
TIER): —n EE % ABW).. | 


一 高 级 混合 
填充 不 通明 度 (从): D100 % 
通道 : 团 RR) 团 s(s) 团 s@) 男 





回 坟 总 (V) 

















图 12-5 图 层 样 式 一 一 投影 
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图 12-5( 续 ) 


(4) 按 Cul + 0 快捷 键 ,选择 移动 工具 ,将 人 物 图 片 拖 动 到 白色 矩形 框 的 上 方 ,调整 
其 大 小 和 倾斜 度 ,在 “图 层 " 面 板 中 生成 新 的 图 层 并 将 其 命名 为 “水 上 运动 "。 单 击 控制 面 
板 下 方 的 “创建 新 的 填充 或 调整 图 层 " 按 钮 ,在 弹出 的 快捷 菜单 中 选择 “色彩 平衡 "命令 ， 
在 “属性 ”面板 中 进行 设置 ,如 图 12-6 所 示 。 

(5) 使 用 相同 的 方法 ,对 素材 其 他 图 片 文件 进行 设置 ,参数 值 相同 ,绘制 不 同 的 图 像 
图 层 , 如 图 12-7 所 示 。 





图 12-6 色彩 平衡 的 设置 图 12-7 添加 图 像 图 层 


3) 绘制 标志 

(1) 打开 素材 文件 ,将 文字 图 片 拖 动 到 图 像 窗 口 的 适当 位 置 ,生成 新 的 图 层 并 命名 为 
“标志 1” 和 “标志 2”, 如 图 12-8 所 示 。 
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图 12-8 ”添加 文字 图 片 


(2) 选择 横 排 文字 ,输入 需要 的 白色 文字 。 选 取 文 字 , 在 工具 选项 栏 中 选择 合适 的 字 
体 并 设置 文字 大 小 ,在 “图 层 "面板 中 生成 新 的 文字 图 层 。 选 择 移动 工具 , 按 Cul +T 快 捷 
键 ,在 文字 周围 出 现 变换 框 ,将 文字 旋转 到 适当 的 角度 。 使 用 相同 的 方法 ,绘制 多 个 不 同 
颜色 的 图 形 , 如 图 12-9 所 示 。 





图 12-9 ”添加 文字 


(3) 选中 * 行 "图 层 。 单 击 * 图 层 "面板 下 方 的 添加 图 层 样式 ,在 弹出 的 快捷 菜单 中 选 
择 “ 投 影 " 命 令 。 在 “ 程 "文字 图 层 上 右 击 , 在 弹出 的 快捷 菜单 中 选择 “粘贴 图 层 样式 ” 
命令 。 

(4) 添加 新 图 层 , 拖 动 至 图 像 窗口 的 下 方 ,填充 颜色 为 白色 ,“ 不 透明 度 ” 设 置 为 
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图 12-10 文字 图 形 样式 


(5) 保存 文件 为 “海岛 旅游 . psd” 和 "海岛 旅游 . jpg" 文 件 ,完成 操作 。 


【知识 归纳 】 


水 墨 画 是 中 国画 的 一 种 ,具有 单纯 性 .象征 性 和 自然 性 3 种 特征 ,讲究 神韵 生动 ,不 拘 
泥 于 物体 的 外 观 相似 ,而 是 以 抒发 主观 情趣 为 主 ,追求 * 似 与 不 似 "的 感觉 ,使 用 照片 制作 
的 水 墨 画 效 果 与 传统 水 墨 画 效果 略 有 不 同 ,稍微 带 有 一 些 色彩 ,但 饱和 度 都 很 低 。 原 图 像 
画面 比较 灰暗 且 带 有 许多 干扰 画面 效果 的 杂 物 ,需要 在 制作 过 程 中 一 步 步 进行 调整 和 去 
除 , 由 于 水 墨 画 并 不 强调 环境 光 对 物体 变化 的 影响 ,而 是 空白 的 布置 和 物体 的 气势 ,所 以 
在 制作 时 要 注意 调整 后 留 白 的 效果 ,如 图 12-11 所 示 。 





图 12-11 江南 水 乡 水 墨 画 


(1) 选择 素材 文件 01. png, 单 击 “ 打 开 " 按 钮 ,打开 选择 的 素材 文件 。 
(2) 单 击 “ 图 层 " 面 板 底部 的 “创建 新 的 填充 或 调整 图 层 "按钮 ,在 弹出 的 快捷 菜单 中 
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选择 “亮度 /对 比 度 " 命 令 ,在 “调整 "面板 中 设置 参数 ,如 图 12-12 所 示 。 
(3) 单 击 “ 图 层 "面板 底部 的 “创建 新 的 填充 或 调整 图 层 " 按 钮 ,在 弹出 的 快捷 菜单 中 
选择 “可 选 颜色 "选项 ,如 图 12-13 所 示 。 





泛 四 高 刘刚 比 度 


刘 度 


对 尼 度 : 


使 用 旧版 





图 12-12 “调整 "面板 (1) 图 12-13 “调整 "面板 (2) 


(4) 单 击 工具 箱 中 的 横 排 文 字 工具 按钮 ,在 画面 中 输入 文字 ,其 中 字体 大小、 位 置 、 
内 容 等 都 可 以 根据 喜好 进行 设置 ,如 图 12-14 所 示 。 





图 12-14 插入 文字 


(5) 保存 文件 为 01. psd 和 01. jpg。 江 南 水 乡 水 墨 画 制作 完成 。 
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任务 12-2 宣传 单 设计 一 一 绘制 与 编辑 图 像 


【知识 储备 】 


1. 图 像 修 复工 具 组 

图 像 修 复工 具 组 包括 污点 修复 画笔 工具 ,修复 画笔 工具 ,修补 工具 和 红眼 工具 4 种 。 

1) 用 污点 修复 面 笔 工具 去 除 瑕 辛 

污点 修复 画笔 工具 最 大 的 优点 就 是 不 需要 定义 原点 ,只 要 确定 好 要 修补 的 图 像 的 位 置 ， 
Photoshop 就 会 从 所 修补 区 域 的 周围 取样 进行 自动 匹配 。 
也 就 是 说 ,只 要 在 需要 修补 的 位 置 画 上 一 笔 然 后 松 开 鼠 标 
后 ,就 完成 了 修补 。 该 工具 用 于 校正 瑕 症 , 使 之 消失 。 

为 了 使 Photoshop 在 自动 取样 时 更 加 准确 , 笔 刷 大 
小 应 比 想 要 去 除 的 污点 略微 大 一 点 ,并 且 将 画笔 的 硬度 
值 调 小 点 ,增加 有 柔 边 效果 ,使 修复 后 的 效果 更 加 自然 。 
具体 操作 步骤 如 下 : 

(1) 打开 锈 门 的 图 片 , 如 图 12-15 所 示 。 

(2) 在 污点 修复 画笔 工具 选项 栏 中 分 别 设置 画笔 的 直径 ,硬度 ,间距 等 ,如 图 12-16 所 示 。 





图 12-15 载 入 的 图 片 (1) 





图 12-16 污点 修复 画笔 工具 选项 栏 


(3) 在 有 铁锈 的 地 方 拖 动 鼠标 ,可 去 掉 铁 锈 ,如 图 12-17 所 示 。 

2) 用 修复 画笔 工具 去 除 粉 刺 

操作 的 方法 与 仿制 图 章 工具 相似 。 按 住 Alt 键 ,在 
修饰 区 域 周围 单 击 相似 的 色彩 或 图 案 采 样 ,然后 在 需要 
修饰 的 区 域 拖 动 鼠标 即 可 。 修 复 画 笔 工具 与 修补 工具 
一 样 ,也 具有 自动 匹配 颜色 的 功能 ,可 根据 需要 进行 
选用 。 

图 12-17 去掉 铁锈 后 的 最 终 效果 具体 操作 步骤 如 下 : 
(1) 打开 需要 修复 粉刺 的 照片 ,如 图 12-18 所 示 。 

(2) 使 用 缩放 工具 将 粉刺 部 位 放大 。 

(3) 选择 修复 工具 ,设置 好 画笔 大 小 ,选用 比 粉刺 大 小 略 大 的 硬度 笔触 。 

(4) 按 住 Alt 键 ,用 鼠标 在 粉刺 周围 单 击 进行 取样 ,然后 取消 按键 , 单 击 粉刺 处 即 可 。 
最 后 效果 如 图 12-19 所 示 。 

3) 红眼 工具 

数码 摄像 中 经 常 出 现 红眼 现象 。 许 多 内 艇 式 闪 光 灯 照明 更 容易 产生 红眼 , 当 闪 光 灯 
照 到 视网膜 上 ,反射 后 就 产生 了 红眼 现象 ,利用 红眼 工具 即 可 修复 。 有 具体 操作 步骤 如 下 : 
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(1) 打开 需要 修复 红眼 的 照片 ,如 图 12-20 所 示 。 

(2) 定位 到 眼睛 部 位 ,并 使 用 缩放 工具 将 人 物 的 眼睛 部 位 放大 。 

(3) 选择 红眼 工具 ,设置 好 瞳孔 大 小 和 变 暗 量 ,如 图 12-21 所 示 ,在 红眼 部 位 进行 单 
击 即 可 。 最 后 效果 如 图 12-22 所 示 。 

2. 绘画 工具 组 

绘画 工具 组 包括 画笔 工具 ,铅笔 工具 和 颜色 替换 工具 3 种 。 前 两 种 画笔 都 可 以 在 图 像 
上 用 前 景色 绘画 ,但 产生 的 效果 不 同 。 夯 笔 工具 会 产生 柔和 描 边 ,而 铝 笔 工具 会 产生 硬 而 清 
晰 的 描 边 。 





图 12-18 载 和 的 图 片 (2) 图 12-19 去除 粉刺 后 的 最 终 效果 








| 名 | 是 孔 大 小 :56%， 国 变 暗 量 : 96% 国 
图 12-20 载 入 的 图 片 (3) 图 12-21 红眼 工具 选项 栏 


使 用 铅笔 工具 和 画笔 工具 的 具体 操作 步骤 如 下 : 

(1) 设 定 前 景色 。Photoshop 使 用 前 景色 绘画 ,填充 和 描 边 。 使 用 背景 色 生成 渐变 填 
充 , 并 在 图 像 的 抹 除 区 域内 填充 。 用 户 可 以 用 “吸管 工具 "“ 颜 色调 板 "“ 色 板 调 板 " 或 “ 拾 
色 器 "指定 前 景色 或 背景 色 。 默 认 的 前 景色 为 黑色 ,背景 色 为 白色 。 选 择 画 笔 工具 或 铅 
笔 工具 。 

(2) 在 工具 选项 栏 中 选取 预 设 的 画笔 ,设置 混合 模式 ,指定 不 透明 度 。 对 于 铅笔 工 
具 , 选 中 “自动 抹 掉 " 复 选 框 ,可 在 包含 前 景色 的 区 域 绘制 背景 色 。 











单 击 终 点 , 即 得 到 直线 。 
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图 12-22 ”去 除 红眼 后 的 最 终 效果 


例如 ,在 空白 文档 上 绘制 一 些 枫叶 ,就 可 采用 画笔 工具 。 具 体操 作 步骤 如 下 : 

(1) 新 建 空白 文档 。 

(2) 选择 画笔 工具 ,设置 好 前 景色 和 背景 色 , 以 及 画笔 的 大 小 、 类 型 ,选择 散布 枫叶 ， 
如 图 12-23 所 示 。 











图 12-23 画笔 工具 选项 栏 
(3) 在 空白 文档 上 单 击 或 拖 动 鼠 标 , 即 可 绘制 出 散乱 的 枫叶 ,如 图 12-24 所 示 。 


3. 仿制 图 章 工具 

选择 图 章 工具 ,可 用 图 像 的 样本 来 绘画 。 从 
图 像 中 取样 ,然后 将 样本 应 用 到 其 他 图 像 或 其 他 
部 分 区 。 仿 制图 章 工具 选项 栏 中 “模式 "用 于 设 
置 复制 图 像 与 源 图 像 混 合 的 方式 。 选 中 “对齐 ” 
选项 , 则 鼠标 每 完成 一 次 操作 后 松 开 鼠标 ,当前 的 
取样 位 置 不 会 丢失 , 仍 能 将 未 复制 完成 的 图 像 按 
原 取 样 位 置 的 样本 复制 完成 ,并 且 不 会 错位 。 

若 不 选 该 项 , 则 每 次 复制 时 ,都 是 从 按 住 Alt 
键 重新 取样 的 位 置 开 始 复制 。 图 12-24 绘制 枫叶 的 最 终 效果 


合 加 童工 时 66 目 休 声 作 步 骤 如 下 ， 
f (2) 在 选项 栏 中 选择 笔尖 并 设置 “模式 “不 透 


os 明度 "和 “流量 "等 画笔 选项 。 

(3) 确定 对 齐 样本 像素 的 方式 。 

(4) 在 选项 栏 中 选中 “用 于 所 有 图 层 " 复 选 框 ， 
可 以 从 所 有 可 视图 层 取样 。 取 消 选择 “用 于 所 有 图 
层 " 复 选 框 ,将 只 从 当前 的 图 层 取样 。 

(5) 在 任意 打开 图 像 中 定位 鼠标 指针 ,然后 按 





3 









v 
, 





图 12-25 载 和 的 图 片 (4) 
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住 Alt 键 单 击 ,设置 取样 点 。 

(6) 在 校正 的 图 像 部 位 左 击 或 拖 动 鼠标 即 可 。 

例如 ,利用 仿制 图 章 工具 来 修饰 眼袋 ,具体 操作 步骤 如 下 : 

(1) 打开 一 幅 需要 修饰 眼袋 的 照片 ,如 图 12-25 所 示 。 选 择 仿制 图 章 工 具 , 从 选项 栏 
的 “画笔 选取 器 "中 选择 柔 角 画笔 ,画笔 的 宽度 略 等 于 要 修饰 区 域 的 一 半 或 更 小 一 些 ,“ 硬 
度 " 为 10% 左右 。 

(2) 在 仿制 图 章 工具 选项 栏 中 将 “不 透明 度 " 降 到 50% ,模式 改 为 亮度" 。 如 图 12- 
26 所 示 为 仿制 图 章 工 具 选 项 栏 。 


ER ES 司 不 明度 :50% 国 注 & i00w 加 | 交口 和 
图 12-26 仿制 图 章 工具 选项 栏 


(3) 按 住 Alt 键 ,在 眼袋 附近 不 受 影响 的 区 域内 取样 。 

(4) 在 眼袋 上 涂抹 , 即 可 去 除 眼 袋 , 如 图 12-27 
所 示 。 

4. 图 案 图 章 工 具 i 

图 案 图 章 工具 可 以 利用 从 图 案 库 中 选择 的 图 案 
或 者 自己 创建 的 图 案 绘画 。 使 用 图 案 图 章 工具 的 具 
体操 作 步 骤 如 下 : 

(1) 选择 图 案 图章 工 具 。 

(2) 在 选项 栏 中 选择 笔尖 并 设置 “模式 “不 透 
明度 "和 * 流 量 "等 画笔 选项 。 图 12.27 ”去 除 眼袋 后 的 最 终 效果 

(3) 选项 栏 中 选中 “对 齐 " 复 选 框 ,这 样 可 以 对 
像素 连续 取样 ,而 不 会 丢失 当前 的 取样 点 ,即使 放 开 鼠标 也 是 如 此 。 

(4) 在 选项 栏 中 选择 图 案 , 图 案 可 通过 “编辑 "菜单 的 “定义 图 案 " 来 生成 。 

(5) 如 果 用 户 对 图 案 应 用 印象 派 效 果 , 可 选中 “ 印象派 " 复 选 框 。 

(6) 在 图 像 中 左 击 或 拖 动 鼠 标 创建 鼠标 , 即 可 使 用 该 图 案 作 画 。 

5. 涂抹 工具 组 

涂抹 工具 组 包括 模糊 工具 锐 化 工具 和 涂抹 工具 3 种 。 利 用 这 3 种 工具 可 以 对 图 像 
细节 进行 局 部 修饰 ,使 用 方式 都 是 在 需要 的 地 方 拖 动 鼠 标 即 可 。 其 中 模糊 工具 可 以 柔 化 
图 像 中 硬 边缘 或 区 域 ,从 而 减少 细节 。 锐 化 工具 可 以 聚焦 软 边缘 ,以 提高 清晰 度 和 聚焦 程 
度 。 涂 抹 工 具 可 以 模拟 在 湿 颜 料 中 拖 动 鼠标 创建 手指 的 动作 ,该 工具 可 拾取 描 边 开始 位 
置 的 颜色 ,并 沿 拖 动 鼠标 创建 方向 展开 这 种 颜色 。3 种 工具 的 选项 基本 相同 。 具 体 实现 
的 效果 区 别 如 图 12-28 所 示 。 

模糊 工具 : 可 柔 化 图 像 中 的 某 些 部 分 ,使 其 显得 模糊 。 

锐 化 工具 : 通过 将 色彩 变 强 烈 , 使 得 色彩 柔和 的 边界 或 区 域 变 得 清晰 化 ,起 到 一 种 清 
晰 边线 或 图 像 的 效果 。 

涂抹 工具 : 可 以 制作 出 一 种 被 水 抹 过 的 效果 ,就 像 水 彩 画 一 样 。 

6. 渐变 工具 组 

渐变 工具 组 包括 渐变 工具 和 油漆 桶 工具 。 选 择 渐变 工具 ,其 选项 栏 如 图 12-29 所 示 。 

| 























| 岂 前 端 开发 实用 案例 教程 wure 如 +HL 5 +CSS 3 +Photoshop) 





图 12-28 ”模糊 工具 处 理 ( 左 ) . 锐 化 工具 处 理 (中 ) 和 涂抹 工具 ( 右 ) 效 果 比 较 











:| 本 加 司 号 加 | Rt [Ex 站 0 出 | 口 5 口 仿 &， 口 运 9 十 
图 12-29 ”渐变 工具 选项 栏 


渐变 工具 : 可 以 创建 多 种 颜色 之 间 的 逐渐 混合 的 效果 。 用 户 可 以 从 预 设 渐变 填充 中 
选取 渐变 或 创建 自己 的 渐变 (操作 方法 : 在 起 点 处 单 击 , 按 住 鼠 标 左 键 拖 动 鼠 标 , 到 终点 
松 开 鼠标 即 可 ) 。 

油漆 桶 工具 : 用 于 在 图 像 或 选择 区 域内 对 指定 色差 范围 内 的 色彩 区 域 进行 色彩 或 图 

运用 两 种 工具 产生 的 效果 及 区 别 如 图 12-30 所 示 。 





























图 12-30 ”渐变 工具 填充 ( 左 ) 和 油漆 桶 工具 填充 ( 右 ) 





【素材 收集 ] 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 

实例 素材 位 置 :“ 单 元 12” 目 录 下 的 images 子 目录 。 

效果 文件 位 置 :“ 单 元 12” 目录 下 的 “摄像 机 产品 宣传 单 . psd” 和 “摄像 机 产品 宣传 
单 .jpg”。 


【任务 实施 】 
摄像 机 产品 主要 针对 的 客户 是 喜欢 记录 精彩 生活 的 DV 爱好 者 。 在 宣传 单 设计 上 要 
通过 摄像 产品 图 片 展示 出 摄像 机 强大 的 功能 和 使 用 的 便捷 性 ,要 突出 表现 出 摄像 机 给 人 
们 生活 带 来 的 真实 变化 ,保留 住人 们 的 美好 记忆 。 
在 设计 思路 上 ,以 阳光 ,海滩 图 片 为 背景 ,表现 出 生活 中 的 美好 景象 。 通 过 对 拍摄 摄 
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像 图 片 的 重新 组 合 和 编排 表现 出 甜蜜 的 度假 时 光 ; 使 用 摄像 机 产品 和 度假 画面 的 组 合 , 展 
示 出 摄像 机 清晰 准确 地 拍摄 功能 ,通过 宣传 性 文字 来 更 细致 地 介绍 产品 的 优势 和 特性 。 
整个 设计 表达 了 一 种 美好 生活 要 瞬间 捕捉 的 愿望 。 

使 用 “色彩 平衡 "命令 改变 图 片 的 颜色 ,使 用 “图 层 蒙 版 "命令 和 画笔 工具 制作 图 片 合 
成 效果 ,使 用 横 排 文 字 工具 添加 宣传 性 文字 。 

1) 添加 图 片 并 进行 编辑 

(1) 打开 素材 文件 。 

(2) 新 建 图 层 并 将 其 命名 为 白色 填充 。 选 择 矩 形 选 框 工 具 , 在 图 形 窗 口中 绘制 选区 , 
填充 选区 为 白色 并 取消 选区 ,效果 如 图 12-31 所 示 。 
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图 12-31 白色 填充 


(3) 单 击 “ 图 层 " 面板 下 方 的 “添加 图 层 样式 "按钮 ,在 弹出 的 快捷 菜单 中 选择 “ 投 
影 " 命 令 ,在 弹出 的 对 话 框 中 进行 设置 ,如 图 12-32 所 示 , 单 击 * 确 定 "按钮 。 
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(4) 将 海滩 图 片 拖 动 到 白色 矩形 框 的 上 方 ,并 调整 
图 像 的 大 小 ,在 “图 层 "面板 中 生成 新 的 图 层 并 将 其 命名 
(5) 单 击 “ 图 层 " 面 板 下 方 的 “创建 新 的 填充 或 调整 
图 层 ” 按 钮 ,在 弹出 的 快捷 菜单 中 选择 “色彩 平衡 "命令 ， 
设置 参数 值 ,如 图 12-33 所 示 。 

(6) 为 人 物 图 片 所 在 图 层 添加 图 层 蒙 版 。 在 图 像 窗 
口中 绘制 一 个 矩形 选区 ,将 选区 填充 为 黑色 。 选 择 画 笔 
工具 ,将 前 景色 设 为 白色 ,在 图 片上 进行 涂抹 ,显示 出 图 
片 中 的 人 物 , 图 像 效 果 如 图 12-34 所 示 。 

(7) 打开 素材 文件 ,将 脚 站 图 片 拖 动 到 图 像 窗口 中 。 
复制 图 层 组 ,并 调整 位 置 和 角度 。 
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图 12-34 人 物 图 片 


(8) 打开 素材 文件 ,将 文件 拖 动 到 图 像 窗 口中 的 适当 位 置 ,如 图 12-35 所 示 。 

2) 制作 产品 宣传 单 

(1) 选择 横 排 文字 工具 ,输入 需要 的 文字 ,并 在 选项 栏 中 选择 合适 的 字体 大 小 ,调整 
适当 的 位 置 。 

(2) 复制 文字 图 层 , 填 充 为 白色 并 调整 到 适当 的 位 置 ,输入 文字 ,调整 文字 的 间距 和 
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图 12-35 图 层 位 置 
行距 ,效果 如 图 12-36 所 示 。 
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图 12-36 ”添加 文字 
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(3) 保存 文件 ,产品 宣传 单 制作 完成 。 


【知识 归纳 】 


宣传 单 是 直销 广告 的 一 种 ,一 般 用 于 宣传 活动 和 促销 商品 ,达到 帮助 客户 了 解 产 品 的 
重要 作用 。 宣 传单 通过 派送 邮寄 等 形式 ,可 以 有 效 地 将 信息 传递 给 目标 群体 。 通 过 不 同 
类 型 宣传 单 的 设计 和 制作 ,掌握 宣传 单 的 设计 思路 和 设计 手法 。 


任务 拓展 


使 用 “图 层 样 式 " 命 令 为 叶子 添加 投影 效果 ,使 用 “自由 变换 "命令 制作 茶叶 包装 的 立 
体 效 果 。 茶 叶 包 装 效 果 如 图 12-37 所 示 。 





图 12-37 茶叶 包装 效果 
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单元 13 广告 类 设计 一 -Photoshop 
平面 设计 


告 设计 以 多 样 的 形式 出 现在 城市 中 ,是 城市 商业 发 展 的 写照 。 广 告 一 般 通过 电视 、 

报纸 \、 需 虹 灯 等 媒体 来 发 布 。 好 的 户外 广告 要 强化 视觉 冲击 力 ,吸引 观众 的 视线 。 广 告 是 
为 了 各 种 特定 的 需要 ,通过 一 定 的 媒体 形式 公开 而 广泛 地 向 公众 传递 信息 的 宣传 手段 , 它 
的 本 质 是 产生 传播 效应 。 

广告 不 同 于 一 般 大 众 传播 和 宣传 活动 ,主要 表现 如 下 : 

(1) 广告 是 一 种 传播 工具 ,将 某 一 项 商品 的 信息 通过 这 种 商品 的 生产 或 经 营 机 构 传 
送 给 用 户 和 消费 者 。 

(2) 广告 进行 的 传播 活动 是 带 有 说 服 性 的 。 

(3) 广告 是 有 目的 有 计划 的 活动 ,一般 是 连续 的 。 

(4) 广告 可 使 用 户 和 消费 者 得 到 有 用 的 信息 

教学 目标 : 

。 掌握 文字 与 色调 的 灵活 应 用 。 

。 掌握 通道 和 小 镜 的 应 用 技巧 

。 掌握 广告 的 设计 思路 及 表现 手法 ， 

。 掌握 广告 的 制作 技巧 。 





任务 13-1 房地产 广告 一 -应 用 文字 与 色调 


【知识 储备 】 


1. 色调 处 理工 具 组 

色调 处 理工 具 组 包括 减 淡 工具 ,加 深 工具 和 海绵 工具 3 种 。 

。 减 淡 工 具 : 用 于 提高 图 像 或 选择 区 域 的 亮度 。 

。 加 深 工具 : 与 减 淡 工 具 正 好 相反 ,主要 用 于 使 图 像 区 域 边 暗 。 

。 海绵 工具 : 用 于 提高 或 降低 图 像 中 色彩 的 饱和 度 (通过 模式 选项 设置 ) 。 当 增加 
颜色 的 饱和 度 时 ,其 灰色 就 会 减少 。 

运用 不 同色 调处 理工 具 产生 的 效果 及 区 别 如 图 13-1 所 示 。 
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深 工 有 效 
减 淡 工 具 效 果 全 全 条 全 


海绵 工具 效果 





图 13-1 3 种 色调 工具 处 理 的 效果 及 区 别 





2. 图 像 色调 与 色彩 的 调整 

1) 色 阶 与 自动 色 阶 

在 进行 图 像 颜色 调整 时 ,要 分 析 图 像 的 整体 色调 是 否 正确 ,是 不 是 过 暗 或 者 过 亮 , 然 
后 才 是 色彩 的 搭配 协调 。 图 像 的 明暗 层次 即 为 阶 调 。 

在 Photoshop 中 文 版 “图像 "菜单 下 的 “调整 " 子 菜单 中 提供 了 多 种 对 图 像 色彩 \ 色 调 
进行 精确 调整 的 命令 。 

这 些 命令 分 为 3 类 : 第 一 类 只 改变 图 像 的 色彩 ;第 二 类 只 改变 图 像 的 色调 ;第 三 类 可 
以 同时 改变 图 像 的 色彩 与 色调 。 

“ 色 阶 曲线“ 亮度/ 对比度" 等 命令 用 于 对 色调 进行 调整 。 

“色相 /饱和 度 “ 替 换 颜色 “可 选 颜 色 " 等 命令 用 于 调整 色彩 。 

“去 色 “ 色 调 分离 “ 色 调 均 化 "等 命令 是 较为 粗糙 的 色彩 调整 命令 。 

要 调整 图 像 的 明暗 度 ,可 以 用 * 色 阶 ” 命 令 来 实现 。 通 过 调整 其 色 阶 可 以 达到 比较 好 
的 效果 。 

如 果 选 择 * 自动 色 阶 "命令 ,系统 不 会 弹出 对 话 框 ,只 是 以 默认 值 来 调整 图 像 颜色 的 
亮度 。 这 种 调整 只 针对 该 图 像 中 所 有 颜色 进行 ,而 不 是 针对 某 一 种 色调 来 调整 。 这 种 命 
令 产生 的 图 像 对 比 度 较 高 。 

2) 曲线 

曲线 是 色调 修正 工具 。 它 不 像 色 阶 那 样 只 使 用 了 3 个 操控 点 来 控制 整个 色调 范围 。 
曲线 将 整体 的 色调 范围 分 为 16 个 小 方块 ,可 以 更 精确 地 控制 每 一 个 亮度 层次 光 点 的 变 
化 ,可 以 更 有 效 地 调整 图 像 的 色调 ,还 可 以 制作 出 许多 奇特 的 色彩 效果 。 

曲线 调整 图 像 色 调 的 具体 操作 步骤 如 下 : 

(1) 打开 欲 调整 的 图 像 。 

(2) 选择 “图 像 " 一 “调整 "一 “曲线 "命令 ,打开 “曲线 "对 话 框 。 

(3) 单 击 曲 线 , 在 曲线 上 设置 控制 点 。 

(4) 按 住 鼠 标 左 键 并 拖 动 鼠标 来 创建 曲线 ,观察 图 像 色调 的 变化 。 向 右 向 上 是 增加 
亮色 调 ,如 果 认 为 合适 了 , 则 单 击 “ 确 定 "按钮 予以 确认 ,如 图 13-2 所 示 。 

3) 匹配 颜色 

选择 “图 像 " 一 “调整 "一 “匹配 颜色 "命令 ,打开 相应 的 对 话 框 ,调节 其 中 的 明度 ,饱和 度 以 
及 颜色 平衡 ,可 以 将 两 张 色调 不 同 的 图 片 调整 成 协调 的 色调 。 具 体操 作 步 又 如 下 : 
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图 13-2 ”曲线 调整 前 后 的 效果 比较 
(1) 打开 一 幅 要 匹配 的 图 像 ,如 图 13-3 所 示 。 另 选 一 幅 风 景 照 作为 “ 源 图 像 ”。 
(2) 单 击 “ 图 像 " 菜 单 命令 ,选择 “调整 "一 “匹配 颜色 "命令 ,出 现 如 图 134 所 示 的 
“匹配 颜色 ”对话 框 。 




















盖 目标 图 像 
目标 : 原 图 1jpg(RGB/8) Ce 
应 用 调整 时 知 跑 选区 (1) CC A] 
图 多 选项 回 和 8(p) 
明亮 度 (L) 100 
一 一 一 一 一 一 一 
颜色 强度 (C) 100 
一 一 一 一 一 | 
a(F) 加 | 
一 一 一 
回 中 和 (N) 
| 
图 多 统计 - 
使 用 源 选 区 计算 颜色 (R) 
使 用 目标 选区 计算 调整 (T) 
源 (S): 原 图 2jpg - 
图 层 (A): 背景 站 
图 13-3 载 入 图片 图 134 “匹配 颜色 "对 话 框 
(3) 在 对 话 框 中 选择 源 照 片 ,选中 “预览 " 复 选 框 , 便 可 以 看 到 目标 图 像 已 经 发 生 了 色彩 


(4) 在 “明亮 度 “ 颜 色 强度 " 和 "* 渐 隐 ?"3 个 滑 块 中 仔细 调整 。 其 中 , 渐 隐 ?请 块 向 右 

增 大 , 则 匹配 程度 减弱 ;向 左 则 加 强 。 
(5) 对 3 个 滑 块 适度 调整 ,直到 目标 照片 看 上 去 比较 自然 。 单 击 * 确 定 "按钮 子 以 确 
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认 , 最 终 效 果 如 图 13-5 所 示 。 








图 13-5 ”运用 “匹配 颜色 ”的 最 终 效果 


4) 替换 颜色 

数码 照片 色彩 的 配置 对 于 图 像 整 体质 量 有 重要 影响 。 应 用 “替换 颜色 "命令 可 以 创 
建 不 同 的 气氛 和 色调 ,从 而 改善 整个 图 像 的 色 视觉 品质 。 

相应 的 “平衡 色彩 “亮度 /对 比 度 "“ 自动 颜色 "“ 色 相 / 饱 和 度 "“ 去 色 ”"“ 可 选 颜色 ” 
等 命令 ,可 以 打开 图 像 ,通过 执行 这 些 命令 ,比较 其 前 后 差异 ,从 而 掌握 其 用 法 。 


【素材 收集 】 


创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文件 夹 。 
实例 素材 位 置 :“ 单 元 13" 目录 。 
效果 文件 位 置 :“ 单 元 13" 目 录 下 的 “房地产 宣传 . psd” 和 “房地产 宣传 . jpg” 。 


【任务 实施 】 


每 个 人 都 希望 买 到 称心 如 意 的 房子 ,每 个 家 庭 都 希望 住 进 舒 适 温馨 的 环境 中 。 房 地 
产 公 司 的 责任 就 是 要 为 大 众 建设 高 品质 的 生活 社区 。 房 地 产 项 目 设计 制作 的 广告 ,在 广 
告 设计 中 要 体现 出 清新 自然 的 居住 环境 和 时 尚 现代 的 建筑 风格 。 

在 设计 思路 上 ,从 整体 环境 入 手 ,通过 大 片 的 云彩 来 展示 自然 的 清新 氛围 ,使 用 花 辩 
素材 寅 意 项 目的 文化 感 。 通 过 楼 房 素材 图 片 显 示 广 告 主体 楼 盘 , 以 表现 出 安全 稳重 之 感 。 
添加 广告 语 和 介绍 性 文字 详细 介绍 房屋 的 居住 环境 与 建筑 特点 ,点 明 项 目的 设计 主题 。 

通过 使 用 图 层 蒙 版 和 画笔 工具 擦 除 不 需要 的 建筑 图 像 。 使 用 “外 发 光 " 命 令 为 建筑 
添加 外 发 光 效果 。 使 用 横 排 文字 蒙 版 工具 和 “投影 "命令 添加 宣传 文字 。 

1) 添加 并 编辑 图 片 

(1) 打开 素材 文件 01. psd 和 02. psd ,将 素材 图 片 拖 动 到 01 素材 图 像 窗 口中 ,在 “图 
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层 "面板 中 生成 新 的 图 层 并 命名 为 “房屋 "图 层 。 
(2) 单 击 “ 图 层 " 面 板 下 方 的 “添加 图 层 蒙 版 "按钮 ,为 房屋 图 层 添加 蒙 版 。 选 择 画 笔 工 
具 , 在 选项 栏 选 择 画笔 按钮 ,前 景色 设 为 黑色 ,用 画笔 涂抹 ,将 图 片 中 不 需要 的 部 分 去 除 掉 。 
(3) 单 击 * 图 层 "面板 下 方 的 “添加 图 层 样式 "按钮 ,在 弹出 的 快捷 菜单 中 选择 “外 发 
光 " 命 令 ,将 发 光 颜 色 设置 为 白色 , 单 击 * 确 定 "按钮 ,如 图 13-6 所 示 。 






























































图 136 “图 层 样式 "对 话 框 (1) 


(4) 将 “房屋 "图 层 复制 两 次 ,生成 两 个 新 的 副本 图 层 。 

(5) 选择 “房屋 副本 2” 图 层 , 按 Cul +T 快 捷 键 ,图 像 周围 出 现 变换 框 ,在 变换 框 内 右 
击 , 在 弹出 的 快捷 菜单 中 选择 “垂直 翻转 "命令 ,将 图 像 垂 直 向 下 拖 动 到 适当 的 位 置 ,并 将 
其 “不 透明 度 " 设 置 为 23% ,如 图 13-7 所 示 。 





用 国门 月 多 NANA 了 


[ei 


图 13-7 图 片 效 果 
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(6) 将 素材 文件 03. psd 和 04. psd 拖 动 到 图 像 窗 口 的 合适 位 置 , 如 图 13-8 所 示 。 





图 13-8 添加 素材 


2) 添加 文字 
(1) 选择 横 排 文字 工具 ,输入 需要 的 文字 ,在 选项 栏 中 选择 合适 的 字体 并 设置 文字 的 
大 小 ,在 “图 层 " 面 板 中 生成 新 的 文字 图 层 , 如 图 13-9 所 示 





图 13-9 添加 文字 








(2) 打开 素材 文件 05. psd, 拖 动 到 图 像 窗 口 的 右上 方 文字 旁边 ,将 其 命名 为 “地 图 ” 
图 层 。 将 该 图 层 的 “混合 模式 "选项 设置 为 “正片 琶 底 ”, 如 图 13-10 所 示 。 
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繁荣 FLOURISH 





13-10 ”设置 正片 琶 底 效果 
(3) 保存 文件 ,完成 操作 ,如 图 13-11 所 示 为 房地产 广告 。 


JR 


” ”繁荣 FLOURISH 
a [者 市 节拍 ] 





图 13-11 房地产 广告 


【知识 归纳 】 


使 用 横 排 文字 蒙 版 工具 或 直 排 文 字 蒙 版 工具 时 ,可 以 创建 一 个 文字 形状 的 选区 。 文 
字 选 区 出 现在 当前 图 层 中 ,并 可 以 像 任何 其 他 选区 一 样 被 移动 .复制 .填充 或 描 边 。 

在 一 张 图 片上 写 上 文字 ,具体 操作 步骤 如 下 : 

(1) 打开 相应 的 图 片 ,选择 横 排 文 字 蒙 版 工具 。 

(2) 设置 好 字体 颜色 大小、. 字 型 。 

(3) 在 图 片 合适 的 位 置 单 击 ,出 现 光 标 闪 动 点 , 即 可 输入 文字 。 当 然 输 入 完 后 ,还 可 
以 对 文字 进行 位 置 大小, 字 型 .颜色 的 修改 ,如 图 13-12 所 示 。 


183 


Web 前 端 开 发 实用 案例 教程 Axure RP +HIM 5 +CSS 3 +Photoshop) 








Ws 里 佐 总 





图 13-12 图 片上 的 文字 


任务 13-2 ”咖啡 广告 一 一 通道 与 滤 镜 


【知识 储备 】 
1. 通道 
通道 主要 用 于 存储 图 像 的 颜色 和 选区 信息 。 在 实际 应 用 中 ,利用 通道 可 以 方便 地 选择 

图 像 中 的 某 部 分 图 像 ,还 可 对 原色 通道 单独 执行 滤 镜 功能 ,从 而 制作 出 许多 特殊 图 像 效 果 。 
1) 认识 通道 和 “通道 "面板 
通道 主要 用 于 保存 图 像 的 颜色 数据 。 例 如 ,一 个 RGB 模式 的 彩色 图 像 包 括 了 RGB 
复合 通道 和 “ 红 "“ 绿 "“ 蓝 "3 条 原色 通道 。 在 Photoshop 中 打开 一 幅 图 像 后 ,选择 “ 窗 
口 " 一 “通道 "命令 ,打开 “通道 "面板 ,可 看 到 图 像 的 各 个 通道 ,如 图 13-13 所 示 。 
通道 缩 览 图 





控制 通道 的 显示 


将 选区 存储 为 通道 
将 通道 作为 选区 载 入 


图 13-13 “通道 "面板 


(1) 通道 名 称 、 通 道 缩 览 图 和 眼睛 图 标 思 : 与 “图 层 " 面板 中 相应 项 目的 意义 基本 相 
同 。 和 * 图 层 "面板 不 同 的 是 ,每 条 通道 都 有 一 条 对 应 的 快捷 键 , 用 户 可 通过 按 相应 快捷 
键 来 选择 通道 ,而 不 必 在 “通道 "面板 中 单 击 选择 。 

(2)“ 将 通道 作为 选区 载 人 "按钮 : 单 击 该 按钮 ,可 将 通道 中 的 部 分 内 容 ( 默 认为 白 
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色 区 域 部 分 ) 转 换 为 选区 ,相当 于 选择 “选择 "一 “ 载 人 选区 ”命令 。 

(3)“ 将 选区 存储 为 通道 "按钮 : 单 击 此 按钮 ,可 将 当前 图 像 中 的 选区 存储 为 蒙 版 ,并 
保存 到 一 条 新 增 的 Alpha 通道 中 。 该 功能 与 选择 “编辑 "一 “存储 选区 "命令 相同 。 

(4)“ 创 建新 通道 "按钮 : 单 击 该 按钮 ,可 以 创建 新 通道 。 用 户 最 多 可 创建 24 条 
通道 。 

(5)“ 删 除 当前 通道 "按钮 : 单 击 该 按钮 ,可 删除 当前 所 选 通道 。 

2) 通道 的 类 型 及 作用 

(1) 原色 通道 : 原色 通道 用 于 保存 图 像 的 颜色 信息 。 对 于 不 同 颜色 模式 的 图 像 ,其 
通道 表示 方法 也 是 不 一 样 的 。 例 如 ,对 于 RGB 模式 的 图 像 来 说 ,其 通道 默认 有 4 条 , 即 
RGB 复合 通道 ( 主 通道 ) , 红 通 道 , 绿 通 道 与 蓝 通道 ;对 于 CMYK 模式 的 图 像 来 说 ,其 通道 
默认 有 5 条 , 即 CMYK 复合 通道 ( 主 通道 ) .青色 通道 洋红 通道 .黄色 通道 与 黑色 通道 。 

(2) Alpha 通道 : 利用 Alpha 通道 可 以 保存 选区 ,还 可 以 在 通道 中 对 选区 进行 各 种 编 
辑 操作 ,从 而 得 到 符合 要 求 或 更 为 精确 的 选区 ,或 制作 一 些 特殊 图 像 效 果 。 

(3) 专 色 通 道 : 主要 用 于 辅助 印刷 。 印 刷 彩 色 图 像 时 ,图 像 中 的 各 种 颜色 都 是 通过 
混合 CMYK 四 色 油 墨 获 得 的 。 但 是 ,基于 色 域 的 原因 , 某 些 特殊 颜色 (如 烫金 字 ) 可 能 无 
法 通过 混合 CMYK 四 色 油 墨 得 到 ,此 时 便 需 要 利用 专 色 来 替代 或 补充 CMYK 四 色 油 墨 。 
要 印刷 带 有 专 色 的 图 像 ,需要 创建 存储 这 些 颜 色 的 专 色 通道 。 在 印刷 时 每 种 专 色 都 要 求 
有 专用 的 印 版 。 

3) 通道 的 基本 操作 

在 “通道 "面板 中 创建 .选择 .复制 和 删除 通道 的 操作 方法 与 图 层 相似 ,在 此 不 再 歼 
述 。 下 面 主要 介绍 一 下 创建 和 设置 Alpha 通道 、 创 建 专 色 通 道 以 及 分 离 和 合并 通道 的 
方法 。 

(1) 创建 和 设置 Alpha 通道 : 除了 单 击 “通道 "面板 底部 的 “创建 新 通道 "按钮 来 创建 
Alpha 通道 外 ,还 可 单 击 “通道 "面板 右上 角 的 按钮 ,在 弹出 的 快捷 菜单 中 选择 “新 建 通道 
命令 ,打开 “新 建 通道 "对话 框 。 用 户 可 在 该 对 话 框 设置 通道 名 称 、 通 道 颜色 和 不 透明 度 
等 , 单 击 “ 确 定 ”按钮 , 即 新 建 一 条 Alpha 通道 ,如 图 13-14 所 示 。 















































图 13-14 ”新 建 通 道 


用 户 在 创建 图 层 蒙 版 时 ,实际 上 也 是 创建 了 一 条 Alpha 通道 。 通 道 蒙 版 和 选区 之 间 
都 是 可 以 相互 转换 的 。 
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在 “新 建 通 道 ”对 话 框 中 修改 蒙 版 的 颜色 和 不 透明 度 仅 改变 通道 的 预览 效果 , 它 可 以 
使 蒙 版 与 图 像 中 的 颜色 对 比 更 加 鲜明 ,以 便于 编辑 操作 ,但 不 会 对 图 像 产 生 影响 。 创 建 
Alpha 通道 后 ,所 需要 对 其 重新 进行 设置 ,可 在 选中 该 通道 后 ,在 “通道 "面板 菜单 中 选择 
“通道 选项 "命令 ,打开 “通道 选项 "对 话 框 ,其 主要 设置 选项 与 “新 建 通道 ”对话 框 相似 。 

(2) 创建 专 色 通道 : 在 “通道 "面板 菜单 中 选择 “新 建 专 色 通道 "命令 ,或 按 住 Chl 键 
单 击 “ 通 道 "面板 底部 的 “创建 新 通道 ”按钮 ,打开 “新 建 专 色 通 道 ” 对 话 框 , 单 击 “ 油 墨 特 
性 "设置 区 的 颜色 框 ,打开 “ 拾 色 器 "对 话 框 , 单 击 颜 色 库 ”按钮 ,从 自 定 颜色 系统 (如 
PANTONE ) 中 选取 一 种 颜色 作为 专 色 。 最 后 设置 油墨 密度 并 单 击 “ 确 定 ” 按 钮 , 即 可 新 建 
一 条 专 色 通 道 , 如 图 13-15 所 示 。 






























































通道 
可 刘 红 cuh3 
名 称 : [PANTONE Medium Yellow C 本 IN 司 室 天 
油 里 村 性 上 
疝 色 : 站 ] 密度 (8): [0 % 习 | | Se 
四 | |PpavronEMe.. ovis 
党 可 回 人 辣 站 


图 13-15 ”新建 专 色 通 道 


(3) 分 离 和 合并 通道 : Photoshop 可 以 将 图 像 文件 中 的 各 原色 通道 分 离 出 来 ,各 自 成 
为 一 个 单独 文件 。 对 分 离 的 通道 文件 进行 相应 编辑 后 ,还 可 以 重新 合并 通道 ,从 而 制作 特 
殊 的 图 像 效 果 。 

在 “通道 "面板 菜单 中 选择 “分 离 通 道 " 命 令 , 即 可 将 当前 图 像 文 件 的 各 原色 通道 分 
离 , 分 离 后 的 各 个 文件 都 以 单独 的 窗口 显示 在 屏幕 上 , 且 均 为 灰 度 图 。 

要 合并 分 离 的 通道 ,可 在 “通道 "面板 菜单 中 选择 “合并 通道 "命令 。 

2. 滤 镜 

Photoshop 提供 了 许多 内 置 滤 镜 , 利 用 它们 可 以 快速 制作 各 种 特殊 的 图 像 效果 。 

1) 滤 镜 的 使 用 方法 

Photoshop 将 提供 的 多 种 滤 镜 分 类 放置 在 “ 滤 镜 "菜单 中 ,如 “风格 化 “模糊 ”扭曲 ” 
滤 镜 组 等 ,使 用 时 只 需 从 “ 滤 镜 "菜单 中 选择 需要 的 滤 镜 即 可 ,如 图 13-16 所 示 。 

2) 使 用 滤 镜 库 

利用 Photoshop 提供 的 滤 镜 库 可 以 预览 常用 的 滤 镜 效果 ,可 以 同时 对 一 幅 图 像 应 用 多 
个 滤 镜 .打开 /关闭 滤 镜 效果 复位 滤 镜 的 设置 参数 以 及 更 改 应 用 滤 镜 的 顺序 等 。 

要 使 用 滤 镜 库 , 可 选择 “ 滤 镜 ”一 “ 滤 镜 库 " 命 令 , 打 开 “ 滤 镜 库 ” 对 话 框 。 

(1)“ 滤 镜 库 " 对 话 框 中 放置 了 一 些 常用 滤 镜 ,并 将 它们 分 别 放 置 在 不 同 的 滤 镜 组 
中 。 例 如 ,要 使 用 * 纹 理化" 滤 镜 ,可 首先 单 击 * 纹 理 " 滤 镜 组 名 ,展开 * 滤 镜 " 文 件 夹 , 然 后 
单 击 “ 纹 理化 " 滤 镜 。 选 中 某 个 滤 镜 后 , 系统 会 自动 在 右 侧 设置 区 显示 该 滤 镜 的 相关 参 
数 ,用 户 可 根据 情况 进行 调整 。 

(2) 要 一 次 应 用 多 个 滤 镜 ,可 在 对 话 框 右 下 角 单 击 “ 新 建 效果 图 层 " 按 钮 以 增加 滤 镜 
层 。 此 外 ,用 户 也 可 以 通过 调整 滤 镜 层 的 顺序 来 改变 滤 镜 的 应 用 效果 。 
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利用 滤 镜 库 可 以 预览 常用 
的 滤 镜 效果 ， 可 以 同时 对 
一 幅 图 像 应 用 多 个 滤 镜 、 
打开 /关闭 滤 镜 效果 、 复 位 
滤 镜 的 设置 参数 以 及 更 改 
应 用 滤 镜 的 顺序 等 


| 滤 镜 组 中 的 滤 镜 


最 大 位 移 : [10 | % 
填充 衬 白 区 类 用 
DD 





选择 滤 镜 并 设置 
相关 参数 











图 13-16 滤 镜 


(3) 单 击 滤 镜 层 左 侧 的 眼睛 图 标 ,可 以 暂时 隐藏 该 滤 镜 效果 ;选中 某 个 滤 镜 层 , 单 击 
“删除 效果 图 层 " 按 钮 ,可 以 删除 该 滤 镜 效果 ,如 图 13-17 所 示 。 

3) 滤 镜 的 使 用 规则 

(1) 滤 镜 的 处 理 效果 是 以 像素 为 单位 的 ,因此 ,用 相同 的 参数 处 理 不 同 分 辨 率 的 图 
像 ,其 效果 也 会 不 同 。 

(2) 在 除 RGB 以 外 的 其 他 颜色 模式 下 只 能 使 用 部 分 滤 镜 。 例 如 ,在 CMYK 和 Lab 颜 
色 模 式 下 ,不 能 使 用 “画笔 描 边 "素描 "和 “纹理 "等 滤 镜 。 

4) 滤 镜 的 使 用 技巧 

滤 镜 的 功能 是 非常 强大 的 ,使 用 起 来 千变万化 ,要 想 熟 练 地 使 用 滤 镜 制作 出 所 需 的 图 
像 效果 ,还 需要 掌握 以 下 几 个 使 用 技巧 。 

(1) 只 对 局 部 图 像 进行 滤 镜 效果 处 理 时 ,可 以 对 选区 设 定 羽 化 值 , 使 处 理 的 区 域 能 自 
人 然 地 与 源 图 像 融 合 , 减 少 突 无 的 感觉 。 

(2) 可 以 对 单一 原色 通道 或 者 Alpha 通道 执行 滤 镜 ,然后 合成 图 像 ,或 将 Alpha 通道 
中 的 滤 镜 效果 应 用 到 主 画 面 中 。 

(3) 可 以 对 一 幅 图 片 应 用 多 个 不 同 的 滤 镜 来 达到 想 要 的 效果 。 此 时 ,应 用 滤 镜 的 顺 
序 决 定 了 当前 操作 的 图 像 的 最 终 效果 ,顺序 不 同 ,效果 也 不 同 。 

(4) 当 执行 完 一 个 滤 镜 操作 后 , 按 Chl + 快捷 键 , 可 快速 重复 上 次 执行 的 滤 镜 操作 ; 
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预览 滤 镜 的 应 用 效果 


设置 所 选 滤 镜 的 参数 


已 应 用 到 图 像 中 的 滤 镜 
会 以 滤 镜 层 的 方式 显示 








控制 预览 图 的 大 小 滤 镜 缩 览 图 


图 13-17 滤 镜 的 应 用 


按 Alt + Ctrl + 下 快捷 键 ,可 以 打开 上 次 执行 滤 镜 操作 的 对 话 框 。 通 过 应 用 多 个 同样 的 滤 
镜 ,可 以 增强 滤 镜 对 图 像 的 作用 ,使 滤 镜 效果 更 加 显著 。 

(5) 在 任 一 滤 镜 对 话 框 中 , 按 住 Alt 键 ,对 话 框 中 的 “取消 "按钮 都 会 变 成 “复位 " 按 
钮 , 单 击 它 可 将 滤 镜 参数 设置 恢复 到 刚 打 开 对 话 框 时 的 状态 。 

(6) 当 执 行 完 一 个 滤 镜 操作 后 ,如 果 按 下 Shift + Ctrl + 下 快捷 键 ,或 选择 “编辑 ”一 
“ 渐 隐 滤 镜 名 称 " 命令 ,将 打开 * 渐 隐 ?” 对 话 框 。 
利用 该 对 话 框 可 将 执行 滤 镜 后 的 图 像 与 源 图 像 
进行 混合 。 用 户 可 在 该 对 话 框 中 调整 “不 透明 
度 " 和 ”模式 "选项 ,如 图 13-18 所 示 。 

(7) 使 用 “编辑 "菜单 中 的 “还 原 ”" 和 *“ 重 做 ” 























命令 可 对 比 执行 滤 镜 前 后 的 效果 。 a 
【素材 收集 】 
创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 


实例 素材 位 置 :“ 单 元 13" 目 录 。 
效果 文件 位 置 :“ 单 元 13” 目 录 下 “咖啡 广告 " 子 目 录 下 的 “咖啡 广告 . jpg”。 


【任务 实施 】 
“咖啡 "一 词 源 自 希腊 语 Kaweh ,意思 是 力量 和 热情 。 喝 咖啡 可 以 放松 心情 ,缓解 疫 
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劳 。 咖 啡 文化 与 现代 都 市 生活 文化 相 联系 ,可 以 表现 出 轻松 自然 .浪漫 温馨 的 气氛 。 

在 设计 思路 上 ,利用 咖啡 厅 图 片 的 模糊 效果 为 背景 ,表现 出 自然 时 尚 的 咖啡 文化 氛 
围 。 通 过 装饰 图 形 和 咖啡 产品 图 片 的 完美 结合 来 突出 显示 广告 主体 。 精 心 设计 的 广告 语 
使 广告 诉求 更 加 清晰 准确。 

使 用 椭圆 选 框 工具 和 算 形 选 框 工具 绘制 装饰 图 形 ,使 用 文字 工具 和 “字符 ”面板 添加 
装饰 文字 等 操作 技术 ,来 制作 美妙 的 咖啡 厅 广 告 , 如 图 13-19 所 示 。 

1) 添加 图 片 并 制作 形状 图 形 

(1) 打开 素材 文件 01. psd, 创 建新 图 层 。 设 置 前 景色 为 白色 ,选择 矩形 选 框 工具 ,在 
图 形 窗 口 下 方 绘制 矩形 选区 ,如 图 13-20 所 示 。 























图 13-19 ”咖啡 厅 广告 图 13-20 ”绘制 矩形 选区 


(2) 选择 椭圆 工具 , 单 击 选项 栏 中 的 “添加 到 选区 "按钮 ,在 矩形 选区 上 方 拖 动 绘制 
形 选 区 。 按 Alt + Delete 快捷 键 用 前 景色 填充 选区 , 按 Cul + D 快捷 键 取消 选择 , 如 
13-21 所 示 。 


加 贺 











图 13-21 填充 选区 


(3) 单 击 “ 图 层 " 面 板 下 方 的 “添加 图 层 样式 ”按钮 ,在 弹出 的 快捷 菜单 中 选择 “ 投 
影 "命令 ,在 弹出 的 对 话 框 中 进行 设置 , 单 击 * 确 定 "按钮 ,如 图 13-22 所 示 。 
2) 编辑 文字 
(1) 选择 横 排 文字 工具 ,输入 需要 的 黑色 文字 并 将 其 选取 ,在 选项 栏 中 选择 合适 的 字 
体 并 设置 文字 的 大 小 ,如 图 13-23 所 示 。 
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各 一 BE 
| | Esme 
i 混合 模式 回 。 正片 天 多 -mm 喜 
站 有 TO 一 一 可 % ET 
gi mY) 
日 旨 角度 (A): ( ae 到。 度 团 使 用 全 局 光 (G) 
一 0 一 回 
站 扩展 R:Gm 0 % 
二 大 9: 5 








口才 到 加 wat: | A"| Dei 


日 声色 委 加 三 品 喇 
BN: C0 % | 










同 图 民 近 空投 0) 














图 13-22 “图 层 样式 "对 话 框 (2) 


gE 
CO 开 开 EE 


图 13-23 文字 图 层 


(2) 选择 移动 工具 来 选取 文字 , 按 Cal +T 快 捷 键 ,文字 周围 出 现 变换 框 ,将 鼠标 光标 
放 在 变换 框 的 控制 手柄 外 部 ,光标 变 为 旋转 图 标 , 拖 动 文字 旋转 至 适当 角度 , 按 Enter 键 
确认 操作 。 

(3) 单 击 “ 图 层 "面板 下 方 的 “添加 图 层 样式 "按钮 ,在 弹出 的 快捷 菜单 中 选择 * 投 
影 " 命 令 ,在 弹出 的 对 话 框 中 进行 设置 , 单 击 * 确 定 "按钮 ,如 图 13-24 所 示 。 

(4) 在 “图 层 " 面 板 上 方 将 文字 图 层 的 “不 透明 度 " 选 项 设置 为 60% , “填充 "选项 设 
置 为 33% ,如 图 13-25 所 示 。 

3) 制作 装饰 图 形 

(1) 打开 素材 02. psd ,将 咖啡 图 片 拖 动 到 图 像 窗 口 的 左下 方 , 在 “图 层 " 面 板 中 生成 
新 的 图 层 并 将 其 命名 为 “咖啡 杯 ” ,如 图 13-26 所 示 。 

(2) 选用 套 索 工具 绘制 不 规则 选区 ,在 “羽化 选区 ”对话 框 中 设置 羽化 值 , 单 击 * 确 
定 "按钮 ,如 图 13-27 所 示 。 
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投影 














结构 

浊 全 模式): FH。 

To 一 tT 一 一 评 % 
mA ) 硬度 团 使 用 全 局 光 G) 
0): 于 


扩展 RD CT 0 % 
大 小 5): 一 国信 素 
































图 13-24 图 层 样式 的 设置 





图 13-25 图像 效果 


ape 












图 13-26 新 图 层 
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图 13-27 羽化 选项 的 设置 


(3) 单 击 “ 图 层 " 面板 下 方 的 “添加 图 层 蒙 版 "按钮 ,为 “咖啡 杯 ” 图 层 添加 蒙 版 ,如 
图 13-28 所 示 。 





图 13-28 ”添加 图 层 蒙 版 


(4) 单 击 “ 图 层 "面板 下 方 的 “创建 新 图 层 " 按 钮 ,选择 钢笔 工具 ,在 咖啡 杯 上 绘制 路 
径 , 所 选 图 层 为 钢笔 图 层 。 

(5) 按 Chl + Enter 快捷 键 ,将 路 径 转换 为 选区 。 用 白色 填充 选区 ,并 将 图 层 的 “不 透 
明度 ”选项 设置 为 40% ,效果 如 图 13-29 所 示 ,制作 线条 1 和 线条 2。 

4) 编辑 文字 并 制作 圆 环 图 形 

(1) 选择 横 排 文字 工具 ,输入 需要 的 白色 文字 并 将 其 选取 ,在 选项 栏 中 选择 合适 的 字 
体 并 设置 文字 的 大 小 。 添 加 文字 ,效果 如 图 13-30 所 示 。 

(2) 将 素材 文字 添加 到 图 形 窗口 的 适当 位 置 ,并 分 别 命 名 为 “文字 "图 层 “ 装 饰 ” 
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一 扫 影 
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COF, 


杂 色 ML 0 
同 图 层 控 空投 影 () 












































图 13-30 ”编辑 文字 


图 层 。 
(3) 保存 文件 ,广告 制作 完成 。 


【知识 归纳 】 


Photoshop 常用 快捷 键 如 下 。 

1. 文件 

新 建 Cul+N 

打开 Cul+0 

打开 为 Alt+Ctl+0 

关闭 Ctl+W 

保存 Ctl+S 

另存 为 ”Cul +Shift +S 
另存 为 网 页 格式 Cul+Al+S 
打印 设置 Chl + Alt +P 
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页 面 设置 ”Ctrl + Shift +P 
打印 Chl +P 

退出 ”Cal + Q 

2. 编辑 

撤销 Cal +Z 

向 前 一 步 ”Cul + Shift +Z 

向 后 一 步 Chl + Alt+Z 
退去 滤 镜 效果 Ctrl + Shift +F 
剪 切 Cul+X 

复制 Cul +C 

合并 复制 ”Ctrl + Shift + C 
粘贴 Cal+V 

原 位 粘贴 “Cul + Shift +V 
自由 变换 Ctl +T 

再 次 变换 Ctrl + Shift +T 
色彩 设置 “Chl + Shift +K 

3. 图 像 

调整 一 色 阶 ”Ctl + 工 
调整 一 自动 色 阶 ”Cul + Shift + 工 
调整 一 自动 对 比 度 ”Ctrl + Shift + Alt + 工 
调整 一 曲线 ”Cul + M 
调整 一 色彩 平衡 ”Chl +B 
调整 一 色相 /饱和 度 Cul+TU 
调整 一 去 色 Ctrl + Shift+U 
调整 一 反 向 Chl +I 

提取 Ctrl + Alt+X 

液化 Ctrl + Shift +X 

4. 图 层 

新 建 图 层 Ctrl + Shift+N 

新 建 通过 复制 的 图 层 “Cul +J 
与 前 一 图 层 编组 Cul+G 
取消 编组 Ctl + Shift + C 
合并 图 层 ”Ctrl + 下 
合并 可 见 图 层 ”Ctl + Shift +E 
5. 选择 

全 选 Cul+A 

取消 选择 ”Chl +D 

全 部 选择 ”Ctrl + Shift +D 
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反选 Cul+Shift +I 
羽化 Cul+Al+D 

6. 滤 镜 

上 次 滤 镜 操作 ”Cul +F 
7. 视图 

校 验 颜色 Chl +Y 

色 域 警告 ”Cul + Shift + 了 
放大 Chl + + 

缩小 Ctl+ 一 
满 画 布 显 示 Cthl +0 
实际 像素 Chul + Alt+0 
显示 附加 Cul +H 
显示 网 格 Chl + Alt+' 
显示 标尺 ”Ctrl +R 
启用 对 齐 Ctl+; 

锁定 参考 线 Cutrl + Alt + ; 
8. 窗口 

关闭 全 部 Ctrl +Shift+W 
9. 帮助 

目录 Fl 

矩形 .椭圆 选 框 工具 M 
裁剪 工具 C 

移动 工具 V 

魔 棒 工 具 W 

喷枪 工具 J 

画笔 工具 B 
橡皮 图 章 、 图 案 图 章 S 
历史 记录 画笔 工具 六 
橡皮 擦 工具 下 

铅笔 直线 工具 N 
模糊 \ 锐 化 ,涂抹 工具 R 
减 淡 加深 海绵 工 具 0 
钢笔 .自由 钢笔 .磁性 钢笔 P 
添加 锚 点 工具 + 
删除 锚 点 工具 ” 

直接 选取 工具 A 

文字 文字 蒙 板 、 直 排 文 字 、 直 排 文 字 蒙 板 T 
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度量 工具 U 

直线 渐变 , 径 向 渐变 、 对 称 渐变 角度 渐变 .次 形 渐变 G 
油漆 桶 工具 KK 

吸管 ,颜色 取样 器 I 

抓 手工 具 H 

缩放 工具 Z 

默认 前 景色 和 背景 色 D 

切换 前 景色 和 背景 色 X 

切换 标准 模式 和 快速 蒙 版 模式 Q 

标准 屏幕 模式 . 带 有 菜单 栏 的 全 屏 模式 .全 屏 模式 下 
临时 使 用 移动 工具 “Cl 

临时 使 用 吸 色 工具 Al 

临时 使 用 抓 手 工具 ”空格 

打开 工具 选项 面板 Enter 





快速 输入 工具 选项 ( 当前 “工具 选项 "面板 中 至 少 有 一 个 可 调节 数字 ) 0 ~9 


循环 选择 画笔 [ 或] 

选择 第 一 个 画笔 ”Shift + [ 
选择 最 后 一 个 画笔 Shift+ ] 

建立 新 渐变 (在 “渐变 编辑 器 "中 ) Cul+N 


任务 拓展 


使 用 图 层 蒙 版 和 渐变 工具 制作 背景 图 片 的 县 加 效果 ,使 用 * 描 边 "命令 和 “自由 变换 "命令 
制作 背景 装饰 框 ,使 用 “色彩 平衡 "命令 调整 图 片 的 颜色 。CD 唱片 包装 效果 如 图 13-31 所 示 。 











图 13-31 CD 唱片 包装 效果 


单元 4 ”精品 资源 共享 课 网 站 设计 


课程 网 站 设计 ,采用 双 主 线 课程 设计 思路 。 以 校 企 合作 为 主线 ,设计 课程 教学 内 容 ， 
开发 课程 教学 资源 ;同时 以 “互联 网 + 教学 ” ,设计 课程 教学 环节 ,组 织 课程 教学 资源 。 学 
生根 据 自身 情况 分 层 拓展 提高 ,网络 平 台 的 开放 自主 的 学 习 , 保 证 了 课程 的 开放 性 。 课 程 
基于 工作 过 程 的 课程 设计 ,教学 改革 以 毕业 生 从 事 开 发 职业 岗位 需求 为 导向 ,分 析 岗 位 的 
典型 工作 任务 ,并 确定 每 个 任务 所 需 的 知识 能力 和 素质 要 求 ,按照 岗位 任职 要 求 ,选取 课 
程 教学 内 容 。 以 企业 的 典型 项 目 为 载体 ,以 任务 驱动 项目 导向 构建 实 训 项 目 和 任务 , 解 
决 了 教学 内 容 与 岗位 能 力 培养 的 不 匹配 问题 。 课 程 按照 开发 流程 ,行业 实用 技术 ,确定 课 
程 的 职业 知识 职业 能 力 和 职业 素质 目标 ,以 开发 过 程 为 主线 ,以 案例 和 项 目 任务 为 载体 ， 
按照 学 生 的 认 知 规律 进行 设计 ,突出 实践 应 用 能 力 。 

网 页 的 可 读 性 和 可 观赏 性 ,对 一 个 网 站 来 说 非常 重要 ,整个 网 页 的 设计 ,特别 是 首页 
的 设计 ,其 内 容 决 定 了 网 站 的 效用 性 。 利 用 学 到 的 各 种 网 页 制作 技术 ,掌握 完整 页 面 的 分 
析 \ 布 局 和 样式 设置 ,最 终 制作 出 一 个 完美 的 网 页 页 面 。 

教学 目标 : 

综合 应 用 制作 精品 资源 共享 课程 页 面 。 


【知识 储备 】 


如 何 实 现 精品 资源 共享 课 网 站 设计 呢 ? 

(1) 整体 布局 分 析 , 页 面 的 结构 用 的 是 id 选择 器 ,里 面 用 的 是 class 选择 器 。 

(2) 在 定义 选择 器 时 ,注意 命名 的 规范 。 

(3) 具体 布局 时 ,页 面 采取 固定 宽度 且 居 中 的 办 法 ,构建 一 个 大 的 < div > (#all) ,里 
面 分 别 为 标题 导航 部 分 #dh 、 主 体 部 分 #main 和 版 权 所 有 信息 部 分 #footer。 





【素材 收集 】 
创建 站 点 ,用 Dreamweaver CS 制作 网 页 。 实 例 图 片 和 文字 内 容 见 本 单元 中 的 素材 文 
件 夹 。 


实例 素材 位 置 :“ 单 元 14" 目 录 。 
效果 文件 位 置 :“ 单 元 14" 目录 下 的 indexkcw. html 和 kcxxzn. html。 


【任务 实施 】 


以 精品 资源 共享 课 网 站 为 案例 ,设计 制作 如 图 14-1 和 图 14-2 所 示 的 页 面 。 
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按照 图 14-1 完成 页 面 的 设计 操作 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打开“ 文件 ”面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 
indexkcw. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 对 网 页 进行 整体 布局 划分 ,将 页 面 结构 分 为 标题 导航 部 分 .主体 部 分 和 版 权 所 有 
信息 部 分 。 





<body > 
<div id="all" > 
<header ></header > 
<! - -标题 导航 部 分 --> 
<div id="dh" > 
<nav class ='menukc" > 
<> 
<Li ><a href ="indexkcw.html" > 课程 首页 </a></1i> 
<1i ><a href "kcxxzn.html" 学 习 指南 </a></1i> 
<Li ><a href "于 > 课程 标准 <a></1i > 
<li ><a href =" 虽 竭 子 课件 <a></1i> 
<li ><a href =" 哇 阅 元 设计 <a></1i> 
<li ><a href = 昱 > 任务 指导 书 <a></1i> 
<Li ><a href = > 微 视频 </a ></1i > 
<Li ><a href = 站 项目 案例 库 </a></1i> 
<Li ><a href =" 哇 洒 题 库 </a></1i> 
<li ><a href= 阅 > 职业 认证 Ya></1i> 
<Li ><a href = 中 :资源 导航 </a ></1i> 
<Li ><a href= 忠 :移动 学 习 </a></1i> 


</ul > 
</nav > 
</div> 
<! - -主体 部 分 --> 


<div id="main" > 
<div id="left" ><br/ > 
<imgsrc ="image/kczdd5 .png"/ ><br/ > 
< class 一 STYLE1" > 
"数据 库 原 理 及 应 用 "是 计算 机 信息 管理 专业 的 核心 课程 。 本 课程 根据 "数据 
库 开发 工程 师 "岗位 的 产品 开发 过 程 ,参照 相关 的 职业 资格 标准 ,总 结 岗位 任 
职 要 求 ,设计 学 习性 工作 任务 。 本 课程 选取 三 个 典型 项 目 案例 ,采用 行动 导向 
的 教学 模式 ,由 浅 入 深 、 循 序 渐进 地 讲述 数据 库 设计 开发 和 管理 的 知识 与 技 
能 ,提高 学 生 综合 职业 能 力 和 素质 ,实现 课程 与 岗位 的 零 对 接 。 </p > 
<br/ > 
<imgsrc ~"image/d95 .gif"/ > 
<table width ="98%" border 一 1" > 
<tr> 
<td align ="center" ><a href ="# target =" blank" > 
<imgsrc —"image/kc100 .png" width —"140" height = 
"70"/></a> 
</td> 
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<td align ~"center" ><a href —"# target =" blank"> 
<imgsrc 2"image/kc101 .png" width 2"140" height 2"7170"/ > 
</a> 

</td> 

<td align ~"center" ><a href =—"# target =" blank"> 
<imgsrc "image/kc102 .png" width 2"140" height 2"7170"/ > 


</a> 
</td> 
J 
</table> 
<br/ > 
<br/ > 


<imgsrc ="image/d56.png"/ ><br/ ><br/ > 
Pp><a href = 曲 target = blank" ><imgsrc "image/kc104 .png" width ="136" 
height ="44"/ ></a >gnbsp; <a href ="$ 
target =" blank" ><img 
src 2"image/kc103 .png" width 2"136" height ="44"/ ></a >&nbsp; 
gnbsp; <a href ="P 
target =" blank" ><img 
src 2"image/kc105 .png" width 2"136" height ="44"/ ></a ></p> 
</p> 
< align ="left" >gnbsp; </p > 
</div> 
<div id="right"> 
<div class ="rightl"> 
<imgsrc ="image/kcyl .png"/ > 
<l> 
dt ><a href ="# target =" blank" > <imgsrc 2"image/kc201.png"/ > 
</a></dt> 
dt ><a href ="# target =" blank" ><imgsrc ="image/kc202.png"/ > 
</a></dt> 
dt ><a href = 日 target =—" blank" ><imgsrc ="image/kc203.png"/ > 
</a></dt> 
dt ><a href —"# target =—" blank" ><imgsrc ="image/kc204.png"/ > 
</a></dt > 
<dt ><a href = 曲 target = blank" ><imgsrc ="image/kc205.png"/ > 
</a></dt> 
</dl > 
<div> 
<div class ="right2" > 
<imgsrc ="image/kcy2 .png"/ > 
<table class ="table" width ="479" height ="98" border ="1" 
cellpadding ="1" cellspacing ="1" 
bordercolor ="B03366" > 
<tr> 
<td align ="center" ><a href ="# target =" blank" > 
<imgsrc —"image/101 .png" width —"40" height —"40"/ > 
</a></td> 
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<td align ="center" ><a href =—"# target =" blank" > 
<imgsrc 2"image/102.png" width 2"40" height "40"/ > 
</a></td> 
<td align “center" >< href —"# target =" blank" > 
<imgsrc "image/105.png" width ="40" height 2"40"/ > 
</a></td> 
<td align ="center" ><a href ="# target =" blank" > 
<imgsrc ="image/104 .png" width ="40" height ="40"/ > 
</a></td> 
<td align ="center" ><a href ="# target =" blank" > 
<imgsrc "image/103.png" width ="40" height ="40"/ > 
</a></td> 
<td align "center" ><a href ="# target =" blank" > 
<imgsrc "image/106.png" width "40" height ="40"/ > 
</a></td> 
<td align ="center" ><a href ="# target =" blank" > 
<imgsrc "image/108 .png" width 2"40" height 2"40"/ > 
</a></td> 
</tr> 
<tr> 
<td height ="23" align ="center" ><span class= 
"STYLE1" > 云 班 签到 </span ></td> 
<td align "center" ><span class "STYLE1" > 单元 设计 
</span ></td> 
<td align "center" ><span class ="STYLE1" > 电子 课件 
</span ></td> 
<td align "center" ><span class ="STYLE1" > 任务 书 
</span ></td> 
<td align "center" ><span class "STYLE1" > 任务 指导 书 
</span ></td> 
<td align "center" ><span class ="STYLE1" 症 学 项 目 
</span ></td> 
<td align =center" ><span class ="STYLE1" > 作业 提交 
</span ></td> 
</tr> 
</table> 
<div> 
<div class ="rightl"> 
<imgsrc ="image/kcy3.png"/> 
<table width ="479" height ="98" border ="'1" cellpadding =" 
cellspacing ="1" bordercolor 一 ' 提 03366" > 
<tr> 
<td align ="center" ><a href ="# target =" blank" ><imgsrc =»" 
image/201 .png"/ ></a></td> 
<td align ="center" ><a href ="# target =" blank" ><imgsrc =—" 
image/202.png"/ ></a></td> 
<td align ="center" ><a href ="# target = blank" ><imgsrc =" 
image/203.png"/ ></a></td> 
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<td align ="center" ><a href ="# target = blank" ><imgsrc —" 
image/208 .png"/ ></a></td> 
<td align ="center" ><a href ="# target = blank" ><imgsrc —" 
image/205.png"/ ></a></td> 
<td align ="center" ><a href ="# target = blank" ><imgsrc —" 
image/206.png"/ ></a></td> 
<td align =—"center" ><a href ="# target =" blank" ><imgsrc =" 
image/207 .png"/ ></a></td> 
<td align ="center" >gnbsp; </td> 
</tr> 
ry 
<td height ="23" align ="center" ><span class ="STYLEl1" > 
微 课 视 频 </span ></td > 
<td align "center" ><span class ="STYLE1" > 拓展 项 目 
</span ></td> 
<td align "center" ><span class ="STYLE1" > 职业 标准 
</span ></td> 
<td align "center" ><span class 了 "STYLE1" > 资格 考试 
</span ></td> 
<td align "center" ><span class 了 "STYLE1" > 行业 动态 
</span ></td> 
<td align "center" ><span class "STYLE1" > 优秀 作品 
</a></span ></td> 
<td align "center" ><span class ="STYLE1" > 云 班 答疑 
</span ></td> 
<td align ="center" >gnbsp; </td> 
</tr> 
</table > 
</div> 
<div class 一 right1" > 
<imgsrc ="image/kcy4 .png"/ > 
<table width ="479" height ="98" border ="'1" cellpadding ="1" 
cellspacing ="1" bordercolor =" 失 03366" > 
<tr> 
<td align ="center" ><a href ='# target =" blank" > 
<imgsrc 2"image/406.png"/ ></a></td> 
<td align ="center" ><a href ="# target =" blank" > 
<imgsrc ="image/402 .png"/ ></a></td> 
<td align -center" ><a href ="# target = blank" > 
<imgsrc 2"image/403.png"/ ></a ></td> 
<td align ="'center" ><a href ='"$# target =" blank" > 
<imgsrc 2"image/404 .png"/ ></a ></td> 
<td align "center" ><a href ="# target =" blank" > 
<imgsrc 2"image/405.png"/ ></a ></td> 
</tr> 
< 
<td height ="23" align =center" ><span class ="STYLE1" > 
课程 标准 </span ></ta> 
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<td align "center" ><span class 一 STYLE1" > 授课 计划 


</span ></td> 

<td align "center" ><span class =STYLE1" > 考核 标准 
</span ></td> 

<td align "center" ><span class "STYLE1" 辣 学 录像 
</span ></td> 

<td align "center" ><span class "STYLE1" > 项 目 案例 库 
</span ></td> 

<td align ="center" ><span class 一 STYLE1" ></span > 
<td> 


<td align ="center" >gnbsp; </td> 
<td align ="center" >gnbsp; </td > 


</tr> 
</table> 
</div> 

<div> 

<div class ="clear"> 

</div> 
</div> 
<! -版 权 所 有 信息 部 分 --> 
<footer > 


<imgsrc ="image/2kjt90iu80.jpg"/ > 
<div class ="sm" > 


为 了 获得 最 佳 浏览 效果 ,建议 在 分 辩 率 大 于 或 等 于 1024 x 768 的 屏幕 下 浏览 网 站 


</div> 
</footer > 
</div> 
</body > 











(4) 保存 文件 。 
2) 设置 CSS 样式 属性 
(1) 本 例 使 用 链接 样式 表 。 





<Link rel ="stylesheet" type ="text/css" href ="stylekc.css" > 





(2) 根据 页 面 结构 ,定义 页 面 样式 。 





@charset “utf -8"7 
/* CSS Document */ 
和 
margin:0; 
padding:0; 
border:0; 
下 
#11{ 
width:1024px; 
margin:0 auto; 
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-STYLE] {font -size: 12px} 
heager{ 
width:1024px; 
height :239px; 
margin:0 auto; 
background -image:url (image/banner0]1 .png); 
background -repeat :no -repeat; 


-ht{ 
width:250px; 
height :20px; 
float:right; 
Padding -right :250px; 
padding -top:15px; 
font -size:l12px; 
line -height :25px; 
Color: 丰 000667 
font -weight: bolgder; 
} 
a:link { 
text -decoration: none; 
Color: 丰 000667 
} 
a:visited { 
text -decoration: none; color: 掉 00066; 
} 
a:hover { 
text -decoration: none;color: 拍 00066; 
} 
a:active { 
text -decoration: none; color: 直 00066; 


} 
/* 导航 菜单 开始 * / 
#h{ 
width:1024px; 
height :34px; 


clear:both; 
margin:0 auto; 
} 
.menu { 
font -family: arial, sans -serif; 
width:1007px; 
height:34px; 
background -image: url (image/dht2 .png); 
margin:0 auto; 
border -top -left -radius: 10px; 
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border top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border -bottom -right -radius: 10px; 


-menu ul { 
padding:0; 
margin:0; 
list -style type: none; 


-menu ul lif{ 
float:left; 
position:relative; 

} 

.menuul lia, .menu ul li a:visited { 
display:block; 
text -align:center; 
text -decoration:none; 
width:110px; 
height :34px; 
Color:#¥ff; 
border -width:lpx lpx 0 0; 
line height:34px; 
font -size:14px; 
font -weight :bolder; 
border -top -left -radius: 10px; 
border -top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border -bottom -right -radius: 10px; 


-menu ul liulf{ 
display: none; 
} 
.menu ul li:hovera{ 
color: B00066; 
background: $B9CCCC; 
} 
/* 导航 菜单 结束 * / 
/* 课程 导航 菜单 开始 * / 
.menukc { 
font -family: arial, sans -serif; 
width:1007px; 
height:34px; 
background -image: url (image/dht2 .png); 
margin:0 auto; 
border -top -left -radius: 10px; 
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border top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border -bottom -right -radius: 10px; 


-menukc ul { 
pagdding:0; 
margin:0; 
list -style -type: none; 


-menukc ul li{ 
float:left; 
position:relative; 


-menukc ul li a, .menu ul li a:visited { 
display:block; 
text -align:center; 
text -decoration:none; 
width:82px; 
height :34px; 
Color:#ff; 
border -width:lpx lpx 0 07 
line height:34px; 
font -size:14px; 
font -weight :bolder; 
border -top -left -radius: 10px; 
border -top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border bottom -right -radius: 10px; 
} 
-menukc ul li ul { 
display: none; 
} 
.menukc ul li:hovera{ 
color: 相 000667 
background: $B9CCCC; 
} 
/* 课程 导航 菜单 结束 * / 
/* 主体 内 容 * / 
dainf{ 
width:1007px; 
margin:0 auto; 
. 
doain p{ 
text -indent :2em; 
line height:25px; 








207 


Er 


Web 本 新 


开发 实用 案例 教程 Axure RP +HIM 5 +CSS 3 +Photoshop) 








+ 


} 


} 


. 





margin:5px; 


dain eft{ 


width:500px; 

float:left; 

height :550px; 

border: solid lpx #ccccc; 

border -top -left -radius: 10px; 
border top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border -bottom -right -radius: 10px; 
margin -top: Spx; 

margin -right: Opx; 

margin -bottom: 2px; 

margin -left: Opx; 

padding -top: 5px; 

Padding -right: 5px; 

padding -bottom: 5px; 

padding -left: Opx; 


doain #ight{ 


width:500px; 
float:right; 


doain #ight .rightl{ 


width:480px; 

float:right; 

height :135px; 

border:solid lpx #ccccc; 

border -top -left -radius: 10px; 
border -top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border -bottom -right -radius: 10px; 
margin -top: Spx; 

margin -right: 6px; 

margin -bottom: Opx; 

margin -left: Opx; 

padding -top: Opx; 

padding -right: Opx; 

padding -bottom: Opx; 

padding -left: 5px; 


ight img{ 
margin -top:5px;} 
#ight dl img{ 


float:left; 
margin -left:10px; 


/* 设置 宽度 * / 


/* 设置 左 侧 高 度 * / 


/* 设置 宽度 * / 
/* 设置 右 浮 动 * / 


/*# 设置 宽度 * / 
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} 


main #ight .right2{ 


} 


#ight2 dl{float:left;} 


margin top: 5px; 


width:480px; 
float:right; 
height :135px; 


border:solid lpx #ccccc; 

border -top -left -radius: 10px; 
border -top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border bottom -right -radius: 10px; 
margin -top: Spx; 

margin -right: 6px; 

margin -bottom: Opx; 

margin -left: Opx; 

padding -top: Opx; 

Padding -right: Opx; 

Padding -bottom: Opx; 

padding -left: 5px; 


#ight2 dl da{ 


} 


line height:34px; 
font -size:l2px; 


color:B00066; 


text -indent :20px; 


/* 主体 内 容 * / 


/* 版 权 所 有 信息 * / 


footer{ 


.sm{ 


} 


/* 版 权 所 有 信息 * / 


width:1007px; 
margin:0 auto; 
height :101px; 
clear:both; 


width:1000px; 
height :50px; 


padding -top:25px; 
margin:15 auto; 
padding -left :35px; 
font -size:12px; 
color: 芹 00033; 


float:left; 


/* 设置 宽度 * / 


/* 设置 宽度 * / 
/* 设置 上 下 外 边 距 为 0, 左 右 居中 对 齐 * / 
/* 设置 高 度 * / 
/* 清除 浮动 * / 
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(3) 保存 文件 。 按 Chl + $ 快捷 键 保存 网 页 ,然后 按 F12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 


【知识 归纳 】 


按照 图 14-2 完成 页 面 的 设计 操作 。 

1) 构建 HTML 结构 

(1) 将 素材 实例 文件 夹 复制 至 创建 My Web 站 点 的 根 目录 中 。 

(2) 启动 Dreamweaver CS, 打开“ 文件 " 面板 ,在 复制 的 文件 夹 中 创建 一 个 名 为 
kcxxzn. html 的 网 页 文档 ,并 在 文档 窗口 中 打开 。 

(3) 对 网 页 进行 整体 布局 划分 ,将 页 面 结构 分 为 标题 导航 部 分 .主体 部 分 和 版 权 所 有 
信息 部 分 。 








<body> 
<div id="all"> 

<header ></header > 

<! - -标题 导航 部 分 --> 

<div id="dh" > 

<nav class ='menukc" > 
cl> 
<1i ><a href ="indexkcw.html" > 课程 首页 </a></1i > 
<1i ><a href ="kcxxzn.html" 疮 习 指 南 </a></1i> 
<Li ><a href= 丫 > 课程 标准 wa ></1i> 
<Li ><a href = 哇 竭 子 课 件 <a></1i> 
<Li ><a href =" 哩 涪 元 设计 <a></1i> 
<1i ><a href ="#¥ 洗 务 指导 书 </a></1i> 
<1i ><a href = 哇 微 视频 </a></1i> 
<Li ><a href = 站 > 硕 目 案例 库 </a></1i > 
<1i ><a href =" 虽 洒 题库 <a></1i> 
<i ><a href= 阅 :> 职业 认证 a></1i> 
<Li >< href= 申 资源 导航 </a ></1i> 
<li ><a href =" : 移 动 学 习 </a></1i> 
</ul > 
</nav > 
</div> 


<! - -主体 部 分 --> 
<div id—"content" > 
div id—"leftlistall" > 
<div id—"leftlistkc" > 
<div id="1istTitlekc" 疮 习 导航 </div> 
<h4 ><imgsrc ~"image/kc10 .png"/ >gnbsp; 课 前 资源 导 学 </h4 > 
<1> 
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<li ><a href ="# target =" plank" > 任务 书 </a><1i> 
<li ><a href "target =" blank" > 任务 指导 书 <a></1i> 
<lLi ><a href =" 曲 target 一 blank" > 微 课 视 频 </a></1i> 
<lLi ><a href =" 曲 target 一 blank" > 在 线 测试 wa ></1i > 
<Li style ="list -style -image:url (image/kcl2.pngj"><a href = 
"target =" blank" > 云 班 答疑 </a></1i > 
</ul > 
<h4 ><imgsrc 一 image/kc10.png"/ >&nbsp; <strong > 课 上 任务 实施 
</strong ></h4 > 
< > 
<Li ><a href =" 嘻 target =" blank" > 云 班 签到 </a ></1i > 
<Li ><a href =" target =" blank" 阅 元 设计 </a></1i> 
<Li ><a href =" 嘻 target =" blank" 意 子 课件 <a></1i> 
<Li ><a href =' target =" blank" > 任务 书 <a></1i> 
<1i ><a href =" 虽 target =" blank" > 任务 指导 书 <a></1i> 
<li ><a href =" target =" blank" 濑 学 项 目 <a></1i> 
<1i style ="list -style -image:url (image/kcl2.png)" ><a href = 
"Ptarget =" blank" > 作业 提交 </a></1i > 
</ul > 
<h4 ><imgsrc ="image/kc10 .png"/ >&nbsp; 课 后 分 层 拓展 </h4 > 
<lL> 
<1i ><a href =" 间 target =" blank" > 微 课 视频 </a ></1i > 
<1i ><a href =" 间 target =" blank" 新 展 项 目 </a></1i > 
<Li ><a href "于 target =" blank" 职业 标准 <a></1i > 
<1i ><a href =" target =" blank" :资格 考试 </a></1i > 
<1i ><a href = 曲 target =" blank" > 行业 动态 </a></1i > 
<1i ><a href ="¥ target =" blank" > 优秀 作品 </a></1i > 
<Li style ="list -style -image:url (image/kcl2.png)" ><a href = 
哇 target = blank" > 云 班 答疑 </a></1i> 
</ul > 
<h4 > <imgsrc =image/kcl10.png"/ >g&nbsp; 课 程 教学 资源 </h4 > 
<al > 
<Li ><a href =" 曲 target = blank" > 课程 标准 </a></1i > 
<Li ><a href = 申 target =" blank" :授课 计划 </a></1i > 
<Li ><a href 一早 target =" blank" > 考核 标准 </a></1i > 
<1i ><a href=" 曲 target = blank" 濑 学 录像 <a></1i> 
<1i style ="list -style -image:url (image/kcl2.png)" ><a href = 
哩 target =" blank" > 项 目 案例 库 </a ></1i > 
</ul > 
</div> 
<div id—"listt2" > 
人 ><p> 
<a href = 曲 target = blank" > <imgsrc "image/kc104.png" width = 
"136" height ="44"/ ></a><br/ ><br/ > 
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<a href ="# target —" blank" ><imgsrc 一 image/kcl103.png" width = 
"36" height ="44"/ ></a ><br/ ><br/ > 
<a href —"# target —" blank" ><imgsrc =image/kc105.png" width = 
"36" height ="44"/ ></a ><br/ > 
< 人 ><br/ ></p> 
</div> 
</div> 
<div idq='rightlist" > 
<div class ="ah2" > <imgsrc ~"image/db.png" width ="102" height ="115" border 
=0" style ="vertical -align:middle"/ >" 数 据 库 原理 及 应 用 "学 习 指南 
</div> 
<div class ="study" > 
snbsp; snbsp; 本 课程 选取 三 个 项 目 案例 ,包括 "教务 管理 数据 库 " 教 学 项 目 、" 图 书 
管理 数据 库 "综合 实 训 项 目 和 "企业 管理 数据 库 " 拓 展 项 目 。 三 个 项 目的 教学 全 程 
都 有 专职 教师 和 企业 兼职 导师 通过 云 班 软件 与 同学 交流 答疑 "教务 管理 数据 库 " 
用 约 26 周 ,主要 在 一 体 化 实 训 室 完成 数据 库 基 本 知识 和 技能 的 学 习 。" 图 书 管理 数 
据 库 "用 4 周 时 间 在 信 翔 公司 软件 开发 部 完成 综合 实 训 。 企 业 拓展 项 目 则 由 基础 
好 的 学 生 利 用 课 下 时 间 , 去 合作 企业 或 者 个 人 联系 的 企业 完成 拓展 实 训 。 
本 课程 的 "图 书 管理 数据 库 " 教 学 项 目 一 共 分 为 11 个 单元 ,每 个 单元 包括 1 -3 个 
具体 学 习性 任务 。 本 课程 每 个 单元 设计 有 " 课 前 资源 导 学 "" 课 上 任务 实施 "" 课 后 
项 目 拓展 "三 个 教学 环节 。 每 个 教学 环节 的 主要 教学 过 程 和 需要 利用 的 网 络 资源 
如 下 表 。 <br/ > 
<br/ > 
snbsp; snbsp; gnbsp; snbsp; gnbsp; &nbsp; &nbsp; &nbsp; &nbsp; snbsp; gnbsp; 
gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 
<img src ="image/study.png" width ="541" height ="442"/ ><br/ > 
<br/ > 
&nbsp; gnbsp; gnbsp; snbsp; gnbsp; gnbsp; 课 程 整体 学 习 资 源 : <a href ="# > 课 
程 标准 </a >、<a href = 站 > 授课 计划 </a >、<a href =" 提 > 考核 标准 </a >、<a 
href = 中 浅 学 录像 </a > <a href = 入 > 项 目 案例 库 </a > 
</div> 
<div class ="clear" > 
<div> 
</div> 
&nbsp; <br/ ><br/ ><br/ > 
</div> 
<! - -版权 所 有 信息 部 分 --> 
<footer > 
<imgsrc ="image/2Kjt90iu80.jpg"/> 
</footer > 
</div> 
</body > 











(4) 保存 文件 。 
2) 设置 CSS 样式 属性 
(1) 本 例 使 用 链接 样式 表 。 


2 人 2 
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<Link rel ="stylesheet" type ="text/css" href ="stylelistkc.css"> 





(2) 根据 页 面 结构 ,定义 页 面 样式 。 








@charset "utf -8"; 
/* CSS Document * / 
| 


#11{ 
width:1024px; 
margin:0 auto; 
} 
-study{ 
font -size:12px; 
line -height :2em; 
margin:5px; 
pagdding:10px; 
} 
.STYLE2 {font -size: 12} 
header{ 
width:1024px; 
height :239px; 
margin:0 auto; 
background -image :url (image/banner01 .png); 
background -repeat :no -repeat; 


-ht{ 
width:250px; 
height :20px; 
float:right; 
padding -right :250px; 
padding -top:15px; 
font -size:]12px; 
line -height :25px; 
color: 拍 00066; 
font -weight: bolgder; 

} 

a:link { 
text -decoration: none; 
Color: 丰 000667 

} 

a:visited { 
text -decoration: none;color: 失 00066; 
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a:hover { 

text -decoration: none;color: 扯 00066; 
二 
a:active { 

text -decoration: none;color: 失 00066; 


和 

/* 课程 导航 菜单 开始 * / 

#h{ 
width:1024px; 
height :34px; 
clear:both; 
margin:0 auto; 

} 

.menukc { 
font -family: arial, sans -serif; 
width:1007px; 
height :34px; 
background -image: url (image/dht2 .png); 
margin:0 auto; 
border -top -left -radius: 10px; 
border -top -right -radius: 10px; 
border bottom -left -radius: 10px; 
border -bottom -right -radius: 10px; 


.menukc ul { 
padding:0; 
margin:0; 
list -style -type: none; 
} 
.menukc ul li { 
float:left; 
position:relative; 
} 
-menukc ul lia, .menu ul li a:visited { 
display:block; 
text -align:center; 
text -Gecoration:none; 
width:82px; 
height :34px; 
Color:Eff; 
border -width:1lpx lpx 0 0; 
line -height:34px; 
font -size:l14px; 
font -weight :bolgder; 
border -top -left -radius: 10px; 
border top -right -radius: 10px; 
border -bottom -left -radius: 10px; 
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border bottom -right -radius: 10px; 


-menukc ul liulf{ 
display: none; 

} 

-Imenukc ul li:hovera{ 
Color: 昌 000667 
background: $B9CCCC; 


} 

/* 课程 导航 菜单 结束 * / 

/* 左 侧 边栏 菜单 1 开始 * / 

/* 县 eftmenu { 
width:150px; 
border -color:#5c6c4 solid; 
border -width:0px lpx lpxlpx; 
font -size:14px; 
text -align:center; 

} 

有 eftmenu ul { 


padding:4px; 
background -color: $6CCCC; 
list -style type:none; 

} 

有 eftmenu ul li { 
background -color:#FF; 
padding:4px; 
font -weight:normal; 
line height:18px; 

, 

eftmenuli.list title{ 
Jackground :区 6CCCC7 
font -weight:bold; 

} 

eftmenu lia{ 
Color :此 666667 
text -Gecoration:none; 

} 

二 eftmenu 1i a:hover { 
Color:$B99999; 
text -decoration:underline; 

} 


/* 左 侧 边栏 菜单 1 结束 * / 
/* 左 侧 边栏 菜单 2 开始 * / 
北 ontent{ 
background -color: §FFFFF; /* 设 置 背景 颜色 * / 
width:1020px; /* 设 置 上 下 内 边 距 和 左右 内 边 距 * / 


background -image: 7 
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} 


background -repeat: no -repeat; 
background -position:bottom right; 
margin top: 07 

margin -right: auto; 

margin bottom: 0; 

margin -left: auto; 

padding -top: 20px; 

pagdding -right: Opx; 

Padding -bottom: 20px; 

padding -left: Opx; 


background -color: #EFFFF; ”/* 设 置 背 景 颜 色 */ 
width:1000px; /* 设 置 上 下 内 边 距 和 左右 内 边 距 * / 
margin:auto; 

margin -top: 0; 

margin -right: auto; 

margin -bottom: 0; 

margin -left: auto; 

padding -top: Opx; 

Padding -right: Opx; 

padding -bottom: Opx; 

Padding -left: Opx; 


ontent eftlistall{ 


} 


width:165px; 

height :780px; 

float:left; 

background -image:url (image/lbg.jpg); 
background -position:right bottom; 
background -repeat :no -repeat; 


北 ontent 有 eftlist{ 


} 


width: 158px; /* 这 里 盒子 的 宽度 大 小 根据 "新 闻 中 心 "背景 图 片 确定 * / 


float: left; /* 设置 左边 盒子 左 浮动 * / 


北 ontent #ightlist { 


} 


float: left; /* 设 置 右 边 盒子 左 浮动 * / 
width: 850px; /* 设置 右边 盒子 宽度 * / 
background -image:url (image/8004 .png); 

background -repeat :no -repeat; 

background -position: right bottom; 


.rightli p{ 


font -size:14px7 
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text -indent :2em; 
line height:2.5em; 


县 istTitlef{ 
background: url (image/listheadl .gif) no -repeat; 
line height: 40px; 
Padding -left: 40px; 
Color: $FFFFFE; 
font -size:14px; 
font -weight:normal7 
height :48px; 


} 

ontent feftlist ulf{ 
background: url (image/listmiddle.gif) repeat -y; 
Padding:0px Opx; 

} 

eftlist ul lif{ 
list -style -type: none; 
list -style -position: inside; 
line height: 30px; 
border -bottom: 1px dashed #99999; 
margin:0 15px; 
padding -left: 10px; 
font -size:l4px; 


list -style -image: url (image/ico5 .gif); 
3 
航 eftlistul li af 
text -decoration: none; 
color: 拆 00000; 
} 
eontent 县 eftlist{ 
width: 158px; 
float: left; 
padding -bottom: 22px; 
background: url (image/listfoot] .gif) no -repeat; 
background -position: bottom; 
| 
二 istt2{ 
width: 150px; 
float: left; 
padding -top: Opx; 


/* 新 闻 标 题 的 背景 * / 
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padding -right: Opx; 
padding -bottom: Opx; 
padding -left: 10px7 
-ah2 { 
line -height: 20px; 
width: 835px; 
pagdding -left:15px; 
background -image:url (image/800 .jpg); 
font -size:28px; 
font -weight :bolder; 
Color: 丰 000337 
text -align:center; 
font -family: "Times New Roman", Times, serif; 


} 
/* 单 元 格 定义 开始 * / 
table{ 
border -collapse:collapse; ”/* 设 置 表格 边框 合并 * / 
margin:20px auto; /* 设 置 表格 与 页 面 边界 的 间距 为 自动 ,此 时 表格 会 自动 居中 * / 


th{ 
height :25px; /* 设置 表 头 高 度 为 25 像素 (与 背景 图 片 的 高 度 相同 ) * / 
line height:25px; ””/* 设 置 表 头 行 高 为 25 像素 与 表 头 高 度 一 致 ,以 使 文字 居中 对 齐 ) * / 
Color :FFEFE; /* 设置 表 头 文字 颜色 为 白色 (也 可 以 写成 color:white;)*/ 


padding:0 2px 0; /* 设 置 单元 格 填充 (内 边 距 ) 大 小 ,上 为 0, 左 右 为 2 像素 ,下 为 0* / 


ta{ 
border:1px soliq FS5F5F;  /* 设置 单元 格 边框 粗细 、 样 式 和 颜色 * / 
height :25px; /* 设置 单元 格 高 度 为 25 像素 * / 
line -height :25px; /* 设置 单元 格 行 高 为 25 像素 ,以 使 文字 居中 对 齐 * / 
padding -left :20px; /* 设 置 单 元 格 左 侧 内 边 距 为 20 像素 * / 
} 
-row { 
background -color:S87D7D7; /* 设置 背景 颜色 * / 
Color: 昌 000007 /* 设置 文字 颜色 * / 
} 
td:hover{ 
Color: 攻 03300;} 
td.a{ 
border:0px;} 
hr { 
background -color: 7 
height: 2px; 
width:95%; 


border: 1px dashed 划 033667 


} 
/* 单 元 格 定义 结束 * / 
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ET 
font -family: Arial, Helvetica, sans -serif; 
font -size: 11px; 
color: 者 00000; 
background -image :url (image/dd5 .png); 
background -repeat :no -repeat; 
padding -left:120px; 
} 
二 eftlistkc{ 
width: 158px; 
float: left; 
Padding -bottom: 22px; 
background: url (image/listfootl .gif) no -repeat; 
background -position: bottomz } 
盘 istTitlekcf 
background: url (image/listheadl .gif) no -repeat; 
line -height: 40px; 
Padding -left: 40px; 
Color: $FFFFF; 
font -size:l14px; 
font -weight:normal7 
height :48px; } 
ontent Reftlistkc ul{ 
background: url (image/listmiddle.gif) repeat -y; 
padding:0px Opx; 
} 
县 istTitlekc2{ 
background: url (image/listmiddle.gif) no -repeat;} 


eftlistkc ul li{ 
list -style -type: none; 
list -style -position: inside; 
Padding -left :10px; 
margin:0 15px; 
line -height :lem; 
font -size:12px; 
list -style -image: Url (image/kcl13.png) 7 
text -align:left; 





ha4{ 
background: url (image/listmiddle.gif) repeat -V7 
padding -left:17px; 
font -size:12px; 
font -style:normal; 


县 eftlistkc ul li af 
text -decoration: none; 


/* 新闻 标题 的 背景 * / 
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Color: 晶 000007 

县 eftlistkc ul li a:hover{ 
background -color :ECCCCC; 
Color: 划 033337 
font -weight:boldqer7 

} 

ontent eftlist{ 
width: 158px; 
float: left; 
Padding -bottom: 22px; 
background: url (image/1istfootl .gif) no -repeat; 
background -Position: bottom; 


} 
/* 左 侧 边栏 菜单 2 结束 * / 
/* 主体 内容 开 始 * / 
ain{ 
width:1024px; 
margin:0 auto; 


} 


doain p{ 
text -indent :2em; 
line height:25px; 
margin:5px; 

} 

和 oain eft{ 
width:200px; /* 设 置 宽度 */ 
float:left; /* 设 置 左 浮动 * / 
padding:5px; /* 设置 左 侧 边 距 * / 
margin:5px Opx 2px 49px; 
height :490px; /* 设置 左 侧 高 度 * / 

} 

main #ight { 

width:480px; /* 设置 宽度 * / 
float:right; /* 设置 右 浮 动 * / 

} 

ain #ight .right1{ 
width:470px; /* 设 置 宽度 */ 
float:right; 
height :150px; /* 设置 单 右 侧 高 度 * / 
margin:5px 6px 2px Opx; /* 设 置 右 侧 外 边 距 * / 


padding -bottom:10px; 

padding -left :10px; 
border:solid lpx $ccccc; 
border -top -left -radius: 10px; 
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border -op -right -radius: 10px; 
border -bottom -left -radius: 10px; 
border -bottom -right -radius: 10px; 
} 
-study { 
border :0px; 
} 
/* 主体 内 容 结束 * / 
/* 版 权 所 有 信息 开始 * / 
footer{ 
width:1007px; /* 设置 宽度 * / 
margin:0 auto; /* 设 置 上 下 外 边 距 为 0, 左 右 居 中 对 齐 * / 
height :101px; /* 设置 高 度 */ 
clear:both; /* 清除 浮动 * / 
} 
/* 版 权 所 有 信息 结束 * / 











(3) 保存 文件 。 按 Ctrl +S 快捷 键 保存 网 页 ,然后 按 Fl12 键 在 浏览 器 中 预览 效果 , 完 
成 此 页 面 的 制作 。 


任务 拓展 


完成 模块 的 整合 ,每 个 模块 都 可 以 独立 查看 效果 。 网 页 的 整体 结构 分 布 , 按 从 上 而 下 的 
顺序 通过 编写 代码 来 实现 。 制 作 如 图 14-3 所 示 网 页 预览 效果 ,素材 参照 文件 夹 中 的 内 容 。 























图 14-3 ”网 页 预览 效果 
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